A small project created using Spring Boot and React.js π
- Spring Boot 3
- React JS 18+
- Tailwind CSS
- Maven
- MySQL DB
Build CRUD REST APIs (add, get, update and delete employees).
Build Frontend React App.
- Add New Employee
- List All Employee
- Update Existing Employee
- Delete Existing Employee
For creating this Full-Stack application, we created a separate project for the frontend created with React and another project for the backend created with Spring Boot, so they are independent of each other.
In the client side:
router
provides routes handlingcomponents
reusable UI elementsservices
communicates with the backendaxios
third-party library for making requests.
In the server side:
Spring Controller
exposes REST APIsService
contains the business logicDAO
the responsable to talk with the DB
This diagram depicts the layered architecture of our application, illustrating how an HTTP request is handled from Postman to the database (DB) and back:
- Postman: Tool for sending HTTP requests to the API.
- DTO: Object that transfers data between layers.
- Controller Layer: Receives HTTP requests, processes them, and sends responses.
- Service Layer: Contains business logic and handles core operations.
- Repository Layer: Manages interaction with the database.
- DB: Persistently stores application data.
- Postman sends an HTTP request.
- The controller receives the request and uses a DTO to transfer data to the service layer.
- The service layer handles business logic and communicates with the repository layer.
- The repository layer interacts with the database.
- The response follows the reverse path, returning processed data to Postman.