🚀 Building a Full Stack Employee Management System with Spring Boot, React, and MySQL

#fullstack #mysql #java #react

Hey everyone!

I’m excited to share my recent project — a Full Stack Employee Management System built using Spring Boot (Backend), React (Frontend), and MySQL (Database).
This project helped me understand how frontend and backend communicate seamlessly through REST APIs and how CRUD operations work end-to-end.

🧩 Tech Stack

Frontend: React, Bootstrap, Axios, React-Router
Backend: Spring Boot, Java
Database: MySQL
Tools: Postman, VS Code, IntelliJ IDEA

💡 Project Overview

The Employee Management System (EMS) is a simple yet powerful CRUD application that allows users to:

➕ Add a new employee
📋 View all employees
✏️ Update employee details
❌ Delete an employee

The frontend is built with React, fetching and updating data via REST APIs created in Spring Boot. All employee records are stored in MySQL.

⚙️ Backend (Spring Boot)

I created REST APIs using Spring Boot:

GET /api/employees → Fetch all employees
POST /api/employees → Add a new employee
GET /api/employees/{id} → Get employee by ID
PUT /api/employees/{id} → Update employee
DELETE /api/employees/{id} → Delete employee

I also integrated CORS to allow communication with the React frontend.

💻 Frontend (React)

For the frontend, I used React Hooks (useState, useEffect) and React Router for navigation.
The UI has:

A list page displaying all employees in a table

An “Add Employee” form
An “Update Employee” form
A header and footer for a clean layout
API calls are made using Axios, and the state updates dynamically without page reloads.

🗄️ Database (MySQL)

I designed a simple table structure:

CREATE TABLE employees (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
first_name VARCHAR(50),
last_name VARCHAR(50),
email VARCHAR(100)
);

The application connects to MySQL through the application.properties file in Spring Boot.

🔗 Integration Flow

React sends requests to the backend API (Axios).
Spring Boot handles requests, performs CRUD operations via JPA.
MySQL stores and retrieves employee data.
React updates UI dynamically based on responses.

🎯 What I Learned

Connecting React frontend with a Spring Boot backend
Managing REST API calls using Axios
Handling form data and routing with React Router
Writing CRUD operations using Spring Data JPA
Understanding full-stack workflow and debugging cross-origin issues (CORS)

This project was a great hands-on experience to strengthen my Java + React full-stack skills.
It gave me a clearer picture of how data flows between frontend, backend, and database layers.

If you’re learning full stack development, I highly recommend building a CRUD app like this — it’s the perfect foundation for larger enterprise applications.

🔗 GitHub Repository

👉 View the Source Code: https://github.com/tejasviurka/ems-fullstack