Student Management System - Full-Stack Web Application

The Student Management System is now a modern full-stack web application built with Spring Boot (backend) and React (frontend), providing a professional and scalable solution for managing student records. The application features a responsive web interface with advanced functionalities including CRUD operations, search, sorting, pagination, form validation, and real-time updates.

Architecture

• Backend: Spring Boot with RESTful APIs, JPA/Hibernate, MySQL database
• Frontend: React with Bootstrap for responsive UI/UX
• Database: MySQL for persistent data storage

Features

Backend Features

• RESTful API endpoints for student CRUD operations
• Data validation with Bean Validation
• JPA/Hibernate for ORM
• MySQL database integration
• CORS support for frontend communication

Frontend Features

• Responsive Dashboard: Clean, modern interface with navigation
• CRUD Operations: Create, Read, Update, Delete students
• Advanced Table: Sortable columns, searchable data
• Pagination: Handle large datasets efficiently
• Form Validation: Client-side validation with error messages
• Loading Indicators: User feedback during API calls
• Confirmation Dialogs: Prevent accidental deletions
• Real-time Updates: Automatic table refresh after operations

Prerequisites

• Java 17 or higher
• Node.js 16 or higher
• MySQL Server
• Maven (for backend build)

Setup Instructions

1. Database Setup

`�ash

Start MySQL server

Run the schema script

mysql -u root -p < schema.sql `

2. Backend Setup

`�ash

Navigate to project root

cd "d:\Projects\Student Management System"

Build and run Spring Boot application

mvn spring-boot:run ` The backend will start on http://localhost:8080

3. Frontend Setup

`�ash

Navigate to frontend directory

cd frontend

Install dependencies

npm install

Start React development server

npm start ` The frontend will start on http://localhost:3000

API Endpoints

• GET /api/students - Get all students
• GET /api/students/{id} - Get student by ID
• POST /api/students - Create new student
• PUT /api/students/{id} - Update student
• DELETE /api/students/{id} - Delete student

Project Structure

student-management-system/ ├── pom.xml # Maven configuration ├── schema.sql # Database schema ├── src/main/java/... # Spring Boot backend │ ├── entity/Student.java │ ├── repository/StudentRepository.java │ ├── service/StudentService.java │ ├── controller/StudentController.java │ └── StudentManagementSystemApplication.java ├── src/main/resources/ │ └── application.properties # Database config └── frontend/ # React frontend ├── public/ ├── src/ │ ├── components/ │ │ ├── Navbar.js │ │ ├── StudentList.js │ │ ├── AddStudent.js │ │ └── EditStudent.js │ ├── services/StudentService.js │ └── App.js └── package.json

Usage

1. Access the application at http://localhost:3000
2. View Students: Browse the student list with search and sorting
3. Add Student: Click "Add New Student" and fill the form
4. Edit Student: Click "Edit" on any student row
5. Delete Student: Click "Delete" and confirm the action

Technologies Used

Backend

• Spring Boot 3.2.0
• Spring Data JPA
• Spring Validation
• MySQL Connector
• Maven

Frontend

• React 18
• React Router DOM
• Bootstrap 5
• Axios for API calls
• React Bootstrap

Development

Running in Development Mode

• Backend: mvn spring-boot:run (hot reload enabled)
• Frontend: pm start (hot reload enabled)

Building for Production

`�ash

Backend

mvn clean package

Frontend

npm run build `

Security Considerations

• Input validation on both client and server
• CORS configuration for frontend-backend communication
• Prepared statements via JPA to prevent SQL injection

Future Enhancements

• User authentication and authorization
• Role-based access control
• Advanced search and filtering
• Data export functionality
• Student enrollment and course management
• Dashboard analytics and reporting