Student Management System - Full Stack Project
Frontend: React
Backend: Java Spring Boot
Project Structure:
student-management/
├── backend/ (Spring Boot)
│ ├── src/
│ └── ...
└── frontend/ (React)
├── src/
└── ...
Backend (Spring Boot):
1. Create Spring Boot App:
$ spring init --dependencies=web,data-jpa,h2 student-backend
2. Code Files:
Student.java
@Entity
public class Student {
@Id
@GeneratedValue
private Long id;
private String name;
private int age;
private String email;
// Getters and Setters
StudentRepository.java
public interface StudentRepository extends JpaRepository<Student, Long> {}
StudentController.java
@RestController
@CrossOrigin(origins = "http://localhost:3000")
@RequestMapping("/students")
public class StudentController {
@Autowired
private StudentRepository repo;
@GetMapping
public List<Student> getAll() {
return repo.findAll();
@PostMapping
public Student create(@RequestBody Student student) {
return repo.save(student);
}
Frontend (React):
1. Create React App:
$ npx create-react-app student-frontend
$ cd student-frontend
$ npm install axios
2. App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [students, setStudents] = useState([]);
const [form, setForm] = useState({ name: '', age: '', email: '' });
useEffect(() => {
axios.get("http://localhost:8080/students")
.then(res => setStudents(res.data));
}, []);
const handleSubmit = (e) => {
e.preventDefault();
axios.post("http://localhost:8080/students", form)
.then(() => window.location.reload());
};
return (
<div style={{ padding: 20 }}>
<h2>Student Management</h2>
<form onSubmit={handleSubmit}>
<input placeholder="Name" onChange={e => setForm({...form, name:
e.target.value})} />
<input placeholder="Age" type="number" onChange={e => setForm({...form,
age: e.target.value})} />
<input placeholder="Email" onChange={e => setForm({...form, email:
e.target.value})} />
<button type="submit">Add Student</button>
</form>
<ul>
{students.map(s => (
<li key={s.id}>{s.name} ({s.age}) - {s.email}</li>
))}
</ul>
</div>
);
export default App;
How to Run:
Backend: $ ./mvnw spring-boot:run
Frontend: $ npm start
