shtanriverdi / react-java-spring-student-crud-project

This is a full-stack web application where teachers can view and manage student grades. The application consists of two parts: a backend developed using Spring Boot and a frontend developed using React.js.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Student Management System | Simple CRUD in React & Java Spring Boot

Video Sample:

2024-02-14_21-17-07.mp4

Introduction

This is a full-stack web application where teachers can view and manage student grades. The application consists of two parts: a backend developed using Spring Boot and a frontend developed using React.js. The backend will handle database operations, while the frontend will provide a user interface for interacting with the system.

Features

  • Backend (Spring Boot App):

    • Listing API: Retrieves and displays existing records from the database. Supports sorting based on a parameter.
    • Addition API: Allows adding a new record to the database.
    • Deletion API: Allows deleting an existing record from the database.
    • Detail API: Retrieves detailed information about a specific record from the database.
  • Frontend (React.js App):

    • Listing Page: Displays a list of records retrieved from the backend. Provides functionality to sort records and navigate to the detail page.
    • Addition Page: Allows users to add a new record with student name and grade information.
    • Detail Popup: Displays detailed information about a specific record in a popup window.

Technologies Used

  • Backend:

    • Java Spring Boot
    • Spring Data JPA for database interaction
  • Frontend:

    • React.js
    • React Router for navigation
    • Reactstrap for UI components
    • Tailwind CSS for styling

Getting Started

To run the application locally, follow these steps:

  1. Clone the repository from GitHub: GitHub Repository Link

  2. Navigate to the backend directory and run the Spring Boot application.

    cd backend
    mvn spring-boot:run
    
  3. Navigate to the frontend directory and install dependencies.

    cd frontend
    npm install
    
  4. Start the React.js development server.

    npm start
    
  5. Access the application in your web browser at http://localhost:3000.

Screenshots

Screenshot 2024-02-14 163110 Screenshot 2024-02-14 211518 Screenshot 2024-02-14 211528 Screenshot 2024-02-14 211545 Screenshot 2024-02-14 211600 Screenshot 2024-02-14 211612

Additional Notes

  • The application does not include a login page as it is assumed to be used by teachers only.
  • UI design is implemented using Tailwind CSS for a modern and responsive interface.
  • For any questions or issues, feel free to contact us.

Thank you for your interest in our application. Happy coding!

About

This is a full-stack web application where teachers can view and manage student grades. The application consists of two parts: a backend developed using Spring Boot and a frontend developed using React.js.


Languages

Language:JavaScript 56.2%Language:Java 41.6%Language:HTML 1.9%Language:CSS 0.3%