Man Monitor Trucks Web App (React + Spring Boot)
In this project the following technologies are used:
- Spring Boot (thanks Lombok to turn the development so much easier!)
- MongoDB
- Reactjs (using react hooks!)
System requirements
- JDK 11
- Maven
- Node
- Docker
This application uses Swagger 2. Access https://monitor-truck-api.herokuapp.com/api/swagger-ui.html to check the documentation.
For development purposes, I decided to containerize three services: backend, database and frontend. Let them communicate with each other (docker-compose-dev)! The Dockerfile-dev of frontend is responsible to run the app in the development mode, exposing the port 3000. The Dockerfile-dev of backend is responsible to run the generated artifact (.jar) from the spring boot project, exposing the ports 8080 and 5005 (debug port) with DEV spring profile enabled - if you want to have hot reload here I suggest to include spring devtools.
For the database, I used the original mongodb docker image (the port 27017 is exposed). All the information from the mongo database is being mapped into a local "data" folder. For the database initialization, the folder “scripts” is mapped to “docker-entrypoint-initdb.d” in order to run the init scripts (user creation + dummy data insertion).
Instructions to start the development and run the web app locally:
- (prepare frontend) Install all the package dependencies for the react app using the command “npm install“;
- (prepare backend) Generate the artifact (.jar) from the spring boot app using the command “mvn clean package”;
- (ready to go) Run docker compose command
docker-compose -f docker-compose-dev.yml up --buildin order to (re)build and start the services!
Note: If you prefer not to use docker for the backend during development, you can manually build and generate the executable file with mvn clean package and then run the maven spring boot plugin (mvn spring-boot:run) or directly the java command java -jar <jar file location>. Do not forget to set the required environment variables. You must be running an instance of MongoDB server.
For continuous integration / deployment, I decided to use Travis CI. Since I am using only one git repository for frontend and backend, I configured two stages, one to run frontend tests and deploy the build on Netlify and the other to run the backend tests (an embedded mongo database is used) and deploy the artifact on Heroku. MongoDB Atlas, a database as a service, is used to store all the data. For real world applications, I suggest a separate git repository for each project.
Check the live demo at https://monitor-truck-client.netlify.com/ !
Note: For test purposes I added to my database some data related with the license plate "LI-2" - If you want more please let me know.
Desktop:
Tablet/Mobile:
