/Full-Stack-React-Spring-Boot-Student-Management-System

This project covers both the backend and frontend aspects using Spring Boot for the backend and React for the frontend. Its main goal is to develop a Student Management System

Primary LanguageJavaScript

Screenshot_8

Student Management System 📚

A Full-stack web application built using React and Spring Boot for managing student records efficiently. The Student Management System allows users to add, update, and delete student information, along with their respective departments. This system ensures seamless communication between the frontend and backend, providing a user-friendly interface to manage student details.

Spring-Boot-React

Tech Stack 🖥

Client: React, Bootstrap, React Router, Axios, Toast Notifications Library

Server: Spring Boot, Spring JPA, Spring Web, MySQL

Key Features 🎇

  • Add, update, and delete student records with their first name, last name, email, and department.
  • View a list of students with department information.
  • Manage departments by adding and updating their names and descriptions.
  • Integration of React for the frontend, ensuring dynamic user interfaces.
  • Backend powered by Spring Boot, providing RESTful APIs for data manipulation.
  • Utilizes Axios for making asynchronous HTTP requests between the frontend and backend.
  • Implements React Router for client-side routing, ensuring a smooth user experience.
  • Toast notifications for informing users about successful and failed actions.
  • Utilizes custom hooks for encapsulating and reusing logic across components.

Screenshots 🎞

Screenshot_1 Screenshot_2 Screenshot_3 Screenshot_4 Screenshot_5 Screenshot_7

Instructions 🕶

Prerequisites:

Before running this application, ensure that you have the following prerequisites in place:

  • Java Development Kit (JDK) 8 or above
  • Node.js and npm (Node Package Manager)
  • MySQL database with a designated schema named "student_management_system"

Setup:

First clone this repository.

$ git clone https://github.com/LuisSalas94/Student-Management-System

Set Up the MySQL Database:

  • Create a MySQL database named "student_management_system".
  • Update the database connection properties in the application.properties file located in the springboot-backend folder.
  • Set the accurate values for spring.datasource.url, spring.datasource.username, and spring.datasource.password.
  • Build and Run the Spring Boot Backend:
  • Open a terminal and navigate to the springboot-backend folder.
  • Build the backend application using Maven: Execute the command ./mvnw clean package.
  • Run the backend application: Use the command ./mvnw spring-boot:run.
  • Install Dependencies and Run the React Frontend:
  • Open another terminal and go to the react-frontend folder.
  • Install dependencies using npm: Run npm install.
  • Start the React development server: Execute npm start.
  • Access the Application:
  • Open your web browser and enter http://localhost:3000 to access the React frontend and interact with the application.

With these steps, you'll have the necessary environment set up to run the Spring Boot backend and the React frontend of the application locally.

Author 👤

Contributing 🤝

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

License 📝

This project is MIT licensed.