👥 This repository hosts the Employee Management Full-Stack App, built with a modern React frontend with a robust Java Spring Boot backend (the RJ-stack) & provides efficient data management and an interactive user experience!
MIT License
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!
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:
Dashboard Page:
Employee List Page:
Department List Page:
Edit Employee Form:
Footer:
Responsive Design Example - Dashboard Page:
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 |
employee-management-app
│
├── docker-compose.yaml
│
├── .mvn
│ └── wrapper
│ └── maven-wrapper.properties
│
├── 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
Ensure that you have Java 11 installed on your local machine. If not, follow the instructions below:
For MacOS:
brew install openjdk@11
export JAVA_HOME=/usr/local/opt/openjdk@11
For Windows: Download OpenJDK 11 from https://jdk.java.net/archive/ and follow the installation instructions.
Also, ensure that MongoDB and MySQL are installed and running on your local machine.
git clone https://github.com/hoangsonww/Employee-Management-Fullstack-App.git
cd Employee-Management-Fullstack-App # Fix the paths if necessary
cd backend
First, ensure you have Maven and Java JDK installed. Run the following command to install them:
brew install maven
Next, install the project dependencies:
mvn install
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.
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.
Get All Employees:
curl -X GET http://localhost:8080/api/employees
Get Employee by ID:
curl -X GET http://localhost:8080/api/employees/1
Get All Departments:
curl -X GET http://localhost:8080/api/departments
Get Department by ID:
curl -X GET http://localhost:8080/api/departments/1
Feel free to add more API endpoints as needed...
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.
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
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.
Alternatively, for those who need the raw OpenAPI JSON, it is available at:
Explore the API Endpoints:
git clone https://github.com/hoangsonww/Employee-Management-Fullstack-App.git
cd frontend
Ensure you have Node.js and npm installed. Run the following command to install the required dependencies:
npm install
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
Run the following command to start the React development server:
npm start
The frontend will be available at http://localhost:3000.
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.
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.
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.
Navbar.js
The navigation bar component that includes links to various pages such as Dashboard, Employees, and Departments. Highlights the currently active page.
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.
Could not autowire
Errors: Ensure that all dependencies are correctly defined in the pom.xml
and that the repository interfaces are located in the correct package structure.
Exception opening socket
for MongoDB: Verify that MongoDB is running and accessible at localhost:27017
. Check MongoDB logs for any connection issues.
Build failed
: Ensure that you are using Java 11 and that all dependencies are correctly installed. Check the pom.xml
file for any missing dependencies.
Regardless of the error, perhaps you can try running the following commands to clean and rebuild the project:
mvn clean install
If the issue persists, you can run Maven with more detailed logging to identify the problem:
mvn -X spring-boot:run
Error: Cannot read properties of undefined (reading 'id'): Ensure that the employee
object in EmployeeForm
is correctly initialized and that the id
parameter is correctly passed. Check the getEmployeeById
and updateEmployee
functions for proper handling of data.
Chart Issues: Ensure Chart.js
and react-chartjs-2
are correctly installed and configured. Verify that the chart data passed to components is in the correct format.
Regardless of the error, perhaps you can try running the following commands to clean and rebuild the project:
npm install
If the issue persists, you can run the React development server with more detailed logging to identify the problem:
npm start --verbose
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.
This project is licensed under the MIT License. See the LICENSE file for details.
For any questions or issues, please contact [email protected].
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.