Employee Management System

Enterprise-Grade Full-Stack Application

Modern Employee & Department Management

A production-ready full-stack application demonstrating the seamless integration of cutting-edge frontend technologies with robust backend architecture, comprehensive DevOps practices, and enterprise-grade deployment strategies.

50+ API Endpoints
3 Deployment Strategies
100% Production Ready
20+ Technologies

Project Overview

🎯

Mission

Demonstrate the seamless integration of modern React frontend with robust Spring Boot backend, showcasing best practices in full-stack development, testing, and deployment.

⚑

Features

Complete CRUD operations, real-time dashboards, authentication & authorization, data visualization, responsive UI, and comprehensive API documentation with Swagger.

πŸš€

DevOps

Docker containerization, Kubernetes orchestration with blue-green & canary deployments, Jenkins CI/CD pipeline, and Terraform infrastructure as code for AWS.

System Architecture

Modern three-tier architecture with React SPA, Spring Boot REST API, and MySQL database, supporting multiple deployment strategies and cloud-native practices.

System Context

flowchart LR User([End User]) -->|HTTPS| UI[React SPA
Tailwind + Material UI
Chart.js + Axios] UI -->|REST / JSON| API[Spring Boot REST API
Controllers & Services] API -->|Spring Data JPA| MySQL[(MySQL Schema
departments
employees
users)] API -->|Optional| Mongo[(MongoDB
Cluster)] API -->|OpenAPI 3.0| Swagger[Swagger UI] subgraph Runtime Options Compose[Docker Compose] K8s[Kubernetes
Manifests] end Compose --> UI Compose --> API K8s --> UI K8s --> API style UI fill:#61DAFB,stroke:#333,stroke-width:2px,color:#000 style API fill:#6DB33F,stroke:#333,stroke-width:2px,color:#fff style MySQL fill:#4479A1,stroke:#333,stroke-width:2px,color:#fff style User fill:#FF6B6B,stroke:#333,stroke-width:2px,color:#fff

Request Lifecycle

sequenceDiagram participant U as User participant UI as React Component participant C as EmployeeController participant S as EmployeeService participant R as EmployeeRepository participant DB as MySQL U->>UI: Trigger "Add Employee" UI->>C: POST /api/employees C->>S: saveEmployee(employee) S->>R: save(employee) R->>DB: INSERT row DB-->>R: persisted entity R-->>S: Employee S-->>C: Employee C-->>UI: 201 Created + payload UI-->>U: Success notification

DevOps Toolchain

flowchart LR Dev[Git Changes] --> Jenkins[Jenkins Pipeline
Build & Test] Jenkins --> Makefile[Makefile & Scripts
Docker/K8s Helpers] Makefile --> Images[Docker Images
Frontend & Backend] Images --> Cluster[EKS/Kubernetes
Deployment] Infra[Terraform AWS
EKS Β· RDS Β· ECR] --> Cluster Cluster --> RDS[(Amazon RDS
MySQL)] Cluster --> ECR[(Amazon ECR
Container Registry)] style Dev fill:#F05032,stroke:#333,stroke-width:2px,color:#fff style Jenkins fill:#D24939,stroke:#333,stroke-width:2px,color:#fff style Cluster fill:#326CE5,stroke:#333,stroke-width:2px,color:#fff style Infra fill:#7B42BC,stroke:#333,stroke-width:2px,color:#fff

Application Layers

Presentation Layer

  • React 18 with Hooks
  • Material UI Components
  • Tailwind CSS Styling
  • Chart.js Visualizations
  • Responsive Design

Business Logic Layer

  • Spring Boot Controllers
  • Service Layer Pattern
  • Data Validation
  • Business Rules
  • Transaction Management

Data Access Layer

  • Spring Data JPA
  • Hibernate ORM
  • Repository Pattern
  • Query Optimization
  • Connection Pooling

Infrastructure Layer

  • Docker Containers
  • Kubernetes Orchestration
  • AWS Cloud Services
  • Load Balancing
  • Auto-scaling

Technology Stack

Frontend Technologies

React 18 JavaScript ES6+ React Router Redux Axios Tailwind CSS Material UI Chart.js Jest React Testing Library

Backend Technologies

Java 11 Spring Boot 2.7 Spring Data JPA Hibernate Spring Security JUnit 5 Swagger/OpenAPI Maven

Databases

MySQL MongoDB

DevOps & Cloud

Docker Kubernetes Jenkins Terraform AWS (EKS, RDS, ECR) Nginx Git GitHub

Deployment Strategies

Production-ready deployment with support for three advanced strategies: Rolling, Blue-Green, and Canary deployments.

πŸ”„ Rolling Deployment

Use Case: Regular updates, incremental rollouts

  • Zero downtime updates
  • Gradual pod replacement
  • Automatic rollback on failure
  • Resource efficient
kubectl set image deployment/backend backend=new-image:v2.0

πŸ”΅πŸŸ’ Blue-Green Deployment

Use Case: Major releases, database migrations

  • Instant rollback capability
  • Complete environment isolation
  • Full testing before switch
  • Zero downtime cutover
./scripts/deploy-blue-green.sh green v2.0

🐀 Canary Deployment

Use Case: High-risk changes, A/B testing

  • Gradual traffic shift (10% β†’ 100%)
  • Real user validation
  • Risk mitigation
  • Performance monitoring
./scripts/deploy-canary.sh v2.0 --weight=10

Kubernetes Deployment Architecture

flowchart TB Users((Users)) --> LB[Load Balancer] subgraph Blue[Blue Version v1.0] BlueFE[Frontend x3] BlueBE[Backend x3] BlueFE --> BlueBE end subgraph Green[Green Version v2.0] GreenFE[Frontend x3] GreenBE[Backend x3] GreenFE --> GreenBE end subgraph Canary[Canary Version v2.1 - 10% traffic] CanaryFE[Frontend x1] CanaryBE[Backend x1] CanaryFE --> CanaryBE end LB --> BlueFE LB -.-> GreenFE LB -.10%.-> CanaryFE BlueBE --> RDS[(RDS MySQL)] GreenBE --> RDS CanaryBE --> RDS style LB fill:#FF6B6B,stroke:#333,stroke-width:2px,color:#fff style Blue fill:#4169E1,stroke:#333,stroke-width:2px,color:#fff style Green fill:#00C851,stroke:#333,stroke-width:2px,color:#fff style Canary fill:#FFD700,stroke:#333,stroke-width:2px,color:#000

Key Features

πŸ“Š

Interactive Dashboard

Real-time metrics with Chart.js visualizations showing employee growth, age distribution, department statistics, and performance indicators.

πŸ‘₯

Employee Management

Complete CRUD operations for employee records with advanced search, filtering, pagination, and bulk operations support.

🏒

Department Organization

Hierarchical department structure with employee assignment, department metrics, and organizational charts.

πŸ”

Authentication & Security

JWT-based authentication, BCrypt password hashing, role-based access control, and secure API endpoints.

πŸ“±

Responsive Design

Mobile-first approach with Material UI and Tailwind CSS, ensuring seamless experience across all devices and screen sizes.

πŸ“–

API Documentation

Interactive Swagger UI with comprehensive API documentation, request/response examples, and live testing capabilities.

πŸ§ͺ

Comprehensive Testing

Unit tests with Jest and JUnit, integration tests, E2E testing, and 90%+ code coverage for reliability.

⚑

Performance Optimization

Lazy loading, code splitting, database query optimization, caching strategies, and CDN integration.

REST API Endpoints

RESTful API with comprehensive CRUD operations, following OpenAPI 3.0 specification

πŸ‘₯ Employee Endpoints

GET /api/employees Get all employees with departments
GET /api/employees/{id} Get employee by ID
POST /api/employees Create new employee
PUT /api/employees/{id} Update employee by ID
DELETE /api/employees/{id} Delete employee by ID

🏒 Department Endpoints

GET /api/departments Get all departments
GET /api/departments/{id} Get department by ID
POST /api/departments Create new department
PUT /api/departments/{id} Update department by ID
DELETE /api/departments/{id} Delete department by ID

πŸ” Authentication Endpoints

POST /api/auth/register Register new user
POST /api/auth/login Authenticate user and get JWT token
POST /api/auth/verify-username Verify username availability
POST /api/auth/reset-password Reset user password

Getting Started

πŸ–₯️ Local Development Setup

Prerequisites

  • Java 11 or higher
  • Node.js 16+ and npm
  • MySQL 8.0
  • Maven 3.6+

Backend Setup

# Clone repository
git clone https://github.com/hoangsonww/Employee-Management-Fullstack-App.git
cd Employee-Management-Fullstack-App/backend

# Install dependencies
mvn clean install

# Configure application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/employee_management
spring.datasource.username=root
spring.datasource.password=your_password

# Run backend
mvn spring-boot:run

# Backend runs on http://localhost:8080

Frontend Setup

# Navigate to frontend
cd ../frontend

# Install dependencies
npm install

# Configure .env
REACT_APP_API_URL=http://localhost:8080/api

# Run frontend
npm start

# Frontend runs on http://localhost:3000

🐳 Docker Compose Setup

Quick Start

# Start all services
docker-compose up --build

# Services:
# - MySQL: localhost:3306
# - MongoDB: localhost:27017
# - Backend: localhost:8080
# - Frontend: localhost:3000

# Stop all services
docker-compose down

# Remove volumes
docker-compose down -v

Build Individual Images

# Build backend
cd backend
docker build -t employee-backend:latest .

# Build frontend
cd frontend
docker build -t employee-frontend:latest .

# Run backend
docker run -p 8080:8080 employee-backend:latest

# Run frontend
docker run -p 3000:3000 employee-frontend:latest

☸️ Kubernetes Deployment

Prerequisites

  • Kubernetes cluster (EKS, GKE, or local with minikube)
  • kubectl CLI configured
  • Docker images pushed to registry

Deploy to Kubernetes

# Create secrets
kubectl create secret generic backend-secrets \
  --from-literal=db-host=mysql-host \
  --from-literal=db-password=your-password

# Apply manifests
kubectl apply -f kubernetes/

# Check deployments
kubectl get deployments
kubectl get pods
kubectl get services

# Access application
kubectl port-forward service/frontend-service 3000:80

Blue-Green Deployment

# Deploy green version
./scripts/deploy-blue-green.sh green v2.0

# Switch traffic to green
./scripts/switch-blue-green.sh green

# Rollback if needed
./scripts/switch-blue-green.sh blue

Application Screenshots

Landing Page

Landing Page

Dashboard

Interactive Dashboard

Employees

Employee Management

Departments

Department Management

Profile

User Profile

API Documentation

Swagger API Documentation

CI/CD Pipeline

Automated Jenkins pipeline with comprehensive testing, security scanning, and multi-strategy deployments

flowchart LR Commit[Git Commit] --> Jenkins[Jenkins Pipeline] Jenkins --> Parallel{Parallel Build} Parallel --> BackendBuild[Backend Build
Maven Install] Parallel --> FrontendBuild[Frontend Build
npm install] BackendBuild --> BackendTest[JUnit Tests] FrontendBuild --> FrontendTest[Jest Tests] BackendTest --> BackendImage[Build Backend
Docker Image] FrontendTest --> FrontendImage[Build Frontend
Docker Image] BackendImage --> Security[Trivy Security
Scan] FrontendImage --> Security Security --> Push[Push to ECR] Push --> Deploy{Deployment
Strategy} Deploy --> Rolling[Rolling Update] Deploy --> BlueGreen[Blue-Green] Deploy --> Canary[Canary] Rolling --> Monitor[Monitor & Verify] BlueGreen --> Monitor Canary --> Monitor Monitor --> Success{Success?} Success -->|Yes| Complete[Deployment Complete] Success -->|No| Rollback[Auto Rollback] style Commit fill:#F05032,stroke:#333,stroke-width:2px,color:#fff style Jenkins fill:#D24939,stroke:#333,stroke-width:2px,color:#fff style Security fill:#FF6B6B,stroke:#333,stroke-width:2px,color:#fff style Complete fill:#00C851,stroke:#333,stroke-width:2px,color:#fff style Rollback fill:#ff4444,stroke:#333,stroke-width:2px,color:#fff

Pipeline Stages

1

Initialize

Workspace cleanup and Git checkout

2

Install Dependencies

Parallel Maven and npm installation

3

Code Quality

Linting and security scans

4

Run Tests

JUnit and Jest test suites

5

Build

Compile and package applications

6

Docker Build

Create container images

7

Security Scan

Trivy vulnerability scanning

8

Deploy

Strategy-specific deployment

9

Verify

Health checks and smoke tests

Project Structure

πŸ“ Frontend Structure

frontend/
β”œβ”€β”€ public/
β”‚   └── index.html
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/      # React components
β”‚   β”‚   β”œβ”€β”€ Dashboard.js
β”‚   β”‚   β”œβ”€β”€ EmployeeList.js
β”‚   β”‚   β”œβ”€β”€ EmployeeForm.js
β”‚   β”‚   β”œβ”€β”€ DepartmentList.js
β”‚   β”‚   └── DepartmentForm.js
β”‚   β”œβ”€β”€ services/        # API services
β”‚   β”‚   β”œβ”€β”€ employeeService.js
β”‚   β”‚   └── departmentService.js
β”‚   β”œβ”€β”€ App.js           # Main app component
β”‚   └── index.js         # Entry point
β”œβ”€β”€ __tests__/           # Jest tests
β”œβ”€β”€ package.json
└── Dockerfile

πŸ“ Backend Structure

backend/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ main/
β”‚   β”‚   β”œβ”€β”€ java/com/example/employeemanagement/
β”‚   β”‚   β”‚   β”œβ”€β”€ controller/    # REST controllers
β”‚   β”‚   β”‚   β”œβ”€β”€ service/       # Business logic
β”‚   β”‚   β”‚   β”œβ”€β”€ repository/    # Data access
β”‚   β”‚   β”‚   β”œβ”€β”€ model/         # JPA entities
β”‚   β”‚   β”‚   β”œβ”€β”€ security/      # Security config
β”‚   β”‚   β”‚   └── config/        # Application config
β”‚   β”‚   └── resources/
β”‚   β”‚       └── application.properties
β”‚   └── test/                  # JUnit tests
β”œβ”€β”€ pom.xml
└── Dockerfile

πŸ“ Infrastructure

infrastructure/
β”œβ”€β”€ kubernetes/          # K8s manifests
β”‚   β”œβ”€β”€ backend-deployment.yaml
β”‚   β”œβ”€β”€ frontend-deployment.yaml
β”‚   β”œβ”€β”€ hpa.yaml
β”‚   β”œβ”€β”€ pdb.yaml
β”‚   └── network-policy.yaml
β”œβ”€β”€ terraform/           # IaC for AWS
β”‚   β”œβ”€β”€ main.tf
β”‚   β”œβ”€β”€ modules/
β”‚   β”‚   β”œβ”€β”€ eks/
β”‚   β”‚   β”œβ”€β”€ rds/
β”‚   β”‚   └── ecr/
β”‚   └── variables.tf
β”œβ”€β”€ scripts/             # Automation
β”‚   β”œβ”€β”€ deploy-blue-green.sh
β”‚   β”œβ”€β”€ deploy-canary.sh
β”‚   └── build-images.sh
β”œβ”€β”€ Jenkinsfile         # CI/CD pipeline
β”œβ”€β”€ docker-compose.yml
└── Makefile

Contributing

We welcome contributions! Please follow these guidelines to contribute to the project.

1

Fork the Repository

Create your own fork of the project on GitHub

2

Create a Branch

Create a feature branch: git checkout -b feature/amazing-feature

3

Make Changes

Follow the coding standards and write tests for your changes

4

Commit

Commit with descriptive messages: git commit -m 'Add amazing feature'

5

Push & PR

Push to your fork and create a Pull Request with detailed description

Code Standards

JavaScript

Follows Airbnb JavaScript Style Guide

npm run format

Java

Follows Google Java Style Guide

mvn formatter:format