Employee Manager

A full-stack CRUD application for managing employee records, built with Angular on the frontend and Spring Boot on the backend. Created as a hands-on project to practice REST API design, dependency injection, reactive forms, and modern Angular patterns (standalone components, signals).

Live Demo · API Documentation · Report a Bug

---

Overview

Employee Manager lets you create, view, update, and delete employee records through a clean, responsive interface backed by a REST API. It was built to demonstrate a complete, production-shaped full-stack workflow — from database entity to styled UI component — rather than to solve a complex business problem.

Features

• Create new employee records through a validated form
• Read a full list of employees, and view individual employee details
• Update existing employee data
• Delete employee records
• Client-side and server-side validation
• Responsive, custom-designed UI (no framework CSS dependency)
• RESTful API following standard HTTP conventions

Tech Stack

Frontend

Technology	Purpose
Angular	SPA framework (standalone components)
TypeScript	Type-safe application logic
Angular Signals	Reactive state management
Reactive Forms	Form handling and validation
Custom CSS	Design system (no Bootstrap/Material dependency)

Backend

Technology	Purpose
Spring Boot	Application framework
Spring Web (MVC)	REST API layer
Spring Data JPA	Data persistence and repository abstraction
Spring Security	Endpoint protection
Maven	Dependency management and build tool

Database

• [Fill in: e.g. MySQL / PostgreSQL / H2]

Architecture

employee-manager/
├── employee-manager/              # Spring Boot backend
│   └── src/main/java/com/henry/employee_manager/
│       ├── controller/            # REST endpoints
│       ├── model/                 # JPA entities
│       ├── repository/            # Data access layer
│       ├── exception/             # Custom exception handling
│       └── config/                # Security configuration
│
└── employee-manager-frontend/     # Angular frontend
    └── src/app/
        ├── employee-list/         # List view
        ├── create-employee/       # Create form
        ├── update-employee/       # Edit form
        ├── employee-details/      # Detail view
        └── employee-service.ts    # HTTP client service

The frontend communicates with the backend exclusively through a REST API — there is no server-side rendering or coupling between the two layers, so each can be deployed and scaled independently.

API Endpoints

Method	Endpoint	Description
GET	/api/employees	List all employees
GET	/api/employees/{id}	Get a single employee by ID
POST	/api/employees	Create a new employee
PUT	/api/employees/{id}	Update an existing employee
DELETE	/api/employees/{id}	Delete an employee

Getting Started

Prerequisites

• Java 17+
• Node.js 18+ and npm
• Angular CLI (npm install -g @angular/cli)
• Maven (or use the included mvnw wrapper)
• [Your database, if not embedded]

Backend Setup

cd employee-manager
./mvnw spring-boot:run

The API will start on http://localhost:8080.

Configure your database connection in src/main/resources/application.properties before running.

Frontend Setup

cd employee-manager-frontend
npm install
ng serve

The app will be available at http://localhost:4200.

Screenshots

Employee List	Add Employee

Deployment

This project is deployed as two independent services:

• Backend: containerized with Docker and hosted on Render
• Frontend: hosted as a static build on Vercel

Roadmap

• Add pagination to the employee list
• Add search/filter functionality
• Write unit tests (backend: JUnit / frontend: Jasmine)
• Add authentication for protected routes

License

This project is licensed under the MIT License.

Author

Henrique Selau de Oliveira LinkedIn · GitHub · Portfolio