Employee-Management-Fullstack-App

Employee Management Full-Stack Application

Table of Contents

Overview

The Employee Management System is a dynamic full-stack application that seamlessly combines cutting-edge and traditional technologies. By integrating a modern React frontend with a classic Spring Boot backend, this project demonstrates how new and established technologies can harmoniously work together to create a robust and efficient application for managing employee and department data!

Key Technologies

User Interface

The frontend of the Employee Management System provides a user-friendly interface for managing employees and departments. It includes features for viewing, adding, editing, and deleting employees and departments. The app also includes visualizations for employee metrics such as growth over time and distribution by age range.

The frontend is also live at https://employee-management-fullstack-app.vercel.app for you to explore and interact with the application. Note that the backend is not hosted, so the API calls will not work and the data will not be present.

Landing Page:

Landing Page

Dashboard Page:

Dashboard Page

Employee List Page:

Employee List Page

Department List Page:

Department List Page

Edit Employee Form:

Edit Employee Form

Footer:

Footer

Responsive Design Example - Dashboard Page:

Responsive Design

And many more features & pages to explore! Feel free to navigate through the application and test the various functionalities.

API Endpoints

Here’s a table listing all the RESTful API endpoints provided by this application:

Endpoint Method Description
/api/employees GET Get all employees
/api/employees/{id} GET Get an employee by ID
/api/employees POST Add a new employee
/api/employees/{id} PUT Update an employee by ID
/api/employees/{id} DELETE Delete an employee by ID
/api/departments GET Get all departments
/api/departments/{id} GET Get a department by ID
/api/departments POST Add a new department
/api/departments/{id} PUT Update a department by ID
/api/departments/{id} DELETE Delete a department by ID
/swagger-ui.html GET Access the Swagger UI documentation

File Structure

employee-management-app
│
├── docker-compose.yaml
│
├── .mvn
│   └── wrapper
│       └── maven-wrapper.properties
│
├── kubernetes
│   ├── configmap.yaml
│   ├── backend-deployment.yaml
│   ├── backend-service.yaml
│   ├── frontend-deployment.yaml
│   └── frontend-service.yaml
│
├── backend
│   ├── src
│   │   ├── main
│   │   │   ├── java
│   │   │   │   └── com
│   │   │   │       └── example
│   │   │   │           └── employeemanagement
│   │   │   │               ├── EmployeeManagementApplication.java
│   │   │   │               ├── config
│   │   │   │               │   └── CorsConfig.java
│   │   │   │               │   └── DataInitializer.java
│   │   │   │               ├── controller
│   │   │   │               │   ├── DepartmentController.java
│   │   │   │               │   └── EmployeeController.java
│   │   │   │               ├── model
│   │   │   │               │   ├── Department.java
│   │   │   │               │   └── Employee.java
│   │   │   │               ├── repository
│   │   │   │               │   ├── DepartmentRepository.java
│   │   │   │               │   └── EmployeeRepository.java
│   │   │   │               ├── service
│   │   │   │               │   └── DataInitializer.java
│   │   │   │               └── exception
│   │   │   │                   └── ResourceNotFoundException.java
│   │   │   └── resources
│   │   │       ├── application.properties
│   │   │       └── data.sql
│   │   └── test
│   │       └── java
│   │           └── com
│   │               └── example
│   │                   └── employeemanagement
│   │                       └── EmployeeManagementApplicationTests.java
│   ├── .gitignore
│   └── pom.xml
│   └── compose.yaml
│
└── frontend
    ├── build
    ├── public
    │   ├── index.html
    │   └── favicon.ico
    │   └── manifest.json
    │   └── robots.txt
    │   └── icon-192x192.webp
    │   └── icon-512x512.webp
    ├── src
    │   ├── components
    │   │   ├── Dashboard.js
    │   │   ├── EmployeeList.js
    │   │   ├── EmployeeForm.js
    │   │   ├── DepartmentList.js
    │   │   ├── DepartmentForm.js
    │   │   └── Navbar.js
    │   ├── services
    │   │   ├── employeeService.js
    │   │   └── departmentService.js
    │   ├── App.js
    │   ├── index.js
    │   ├── index.css
    │   ├── reportWebVitals.js
    │   └── App.css
    │   └── theme.js
    ├── Dockerfile
    ├── postcss.config.js
    ├── tailwind.config.js
    └── package.json

Backend Setup

1. Prerequisites

Ensure that you have Java 11 installed on your local machine. If not, follow the instructions below:

2. Clone the Repository

git clone https://github.com/hoangsonww/Employee-Management-Fullstack-App.git
cd Employee-Management-Fullstack-App  # Fix the paths if necessary
cd backend

3. Install Dependencies

First, ensure you have Maven and Java JDK installed. Run the following command to install them:

Next, install the project dependencies:

mvn install

4. Configure the Application

Update src/main/resources/application.properties with your MySQL and MongoDB configuration:

# MySQL Configuration
spring.datasource.url=jdbc:mysql://localhost:3306/employee_management
spring.datasource.username=root
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=update

# MongoDB Configuration
spring.data.mongodb.uri=mongodb://localhost:27017/employee_management

Feel free to change the database name, username, and password, and even add more configurations as needed.

5. Start the Backend Server

Before starting the server, ensure that MySQL and MongoDB are running and properly configured on your local machine!

Then, run the following command to start the Spring Boot application:

mvn spring-boot:run

The backend will be available at http://localhost:8080.

6. Access the API Endpoints

7. API Documentation

Overview

This application also uses Swagger to provide an interactive API documentation interface. The Swagger UI allows developers to explore the available API endpoints, view detailed information about each endpoint, and test the endpoints directly from the browser.

How to Access the API Documentation

  1. Start the Backend Server: Ensure that the backend server is running. You can start the server by navigating to the backend directory and running:

    mvn spring-boot:run

  2. Open the Swagger UI: Once the server is up and running, you can access the Swagger UI by navigating to the following URL in your web browser:

    http://localhost:8080/swagger-ui.html

    This will open the Swagger interface where you can explore the API endpoints.

  3. Alternatively, for those who need the raw OpenAPI JSON, it is available at:

    http://localhost:8080/v3/api-docs

  4. Explore the API Endpoints:

    • Use the sidebar or the search bar to navigate through the available API endpoints.
    • Click on an endpoint to view its details, including the request method (GET, POST, PUT, DELETE), parameters, request body, and possible responses.
    • You can also test the endpoints directly by clicking the “Try it out” button, providing the necessary input, and executing the request.
    • If you have everything set up correctly, you should see the following Swagger UI interface:

Swagger UI

Benefits of Using Swagger UI

8. Backend JUnit Testing

To run the unit and integration tests, use:

mvn test

This will run the tests and provide you with the results. Ensure that all tests pass before making any changes to the application.

Feel free to add more tests as needed to ensure the reliability and correctness of your application.

Frontend Setup

1. Clone the Repository

git clone https://github.com/hoangsonww/Employee-Management-Fullstack-App.git
cd frontend

2. Install Dependencies

Ensure you have Node.js and npm installed. Run the following command to install the required dependencies:

npm install

3. Set Up Environment Variables

Create a .env file in the root of your project if it doesn’t already exist. Add the following environment variable:

REACT_APP_API_URL=http://localhost:8080/api

4. Start the Development Server

Run the following command to start the React development server:

npm start

The frontend will be available at http://localhost:3000.

5. Build for Production

To create a production build of your application, run:

npm run build

The build files will be generated in the build directory. You can deploy these files to your production server.

6. Test the Application (Optional)

To run tests for the frontend application, use the following command:

npm test

NOTE: You might need different IDEs for the backend and the frontend. FYI, I used IntelliJ IDEA for the backend and Webstorm for the frontend.

Detailed Component Instructions

Dashboard.js

Displays various metrics related to employees, such as total employee count, average age, employee growth over time, and distribution by age range. It uses react-chartjs-2 to render bar charts.

EmployeeList.js

Shows a list of employees with options to search, paginate, and delete entries. Includes a link to add a new employee and edit existing employees.

EmployeeForm.js

Provides a form for adding or editing employee details. Fetches departments to populate the department dropdown. Uses useParams to determine if it’s in edit mode or add mode.

DepartmentList.js

Displays a list of departments with options to search, paginate, and delete entries. Includes a link to add a new department and edit existing departments.

DepartmentForm.js

Provides a form for adding or editing department details.

The navigation bar component that includes links to various pages such as Dashboard, Employees, and Departments. Highlights the currently active page.

Containerization

If you’d also like to containerize the project, the project also includes the dockerfile and docker-compose.yaml files for containerization. You can build and run the application in a Docker container using the following command:

docker compose up --build

This command will build the Docker images for the frontend and backend, create containers, and start the application. Feel free to view them in Docker Desktop.

Kubernetes

The project also includes Kubernetes configuration files in the kubernetes directory for deploying the application to a Kubernetes cluster. You can deploy the application to a Kubernetes cluster using the following command:

kubectl apply -f kubernetes

This command will create the necessary deployments, services, and config maps for the frontend and backend. You can access the application using the NodePort or LoadBalancer service created.

Jenkins

The project also includes a Jenkinsfile for automating the build and deployment process using Jenkins. You can create a Jenkins pipeline job and use the Jenkinsfile to build and deploy the application to a Kubernetes cluster.

Feel free to customize the Jenkins pipeline to suit your specific requirements and deployment process.

Troubleshooting

Backend Issues

Frontend Issues

Contributing

If you’d like to contribute to the project, please fork the repository and submit a pull request with your changes. Ensure that you follow the project’s coding standards and include relevant tests for new features.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or issues, please contact hoangson091104@gmail.com.

Thank you for checking out the Employee Management Full-Stack Application! Feel free to use this project for your own learning or development purposes.

Created with ❤️ by Son Nguyen in 2024.

⬆ Back to Top

This site is open source. Improve this page.