This is a web application built by Java Spring Boot backend with React.js frontend to demonstrate a fullstack web application.
This was built using Spring Boot dependencies:
The pom.xml includes Spring Boot Web, MySQL, JPA, Lombok. I need Spring Boot to run the application through Apache Tomcat to be access in my local server at localhost:8080. The database will be built via MySQL Workbench where I can access and view data outside of the application. JPA is implemented to access its JPARepository library to build the CRUD methods in a REST API. The REST API will be accessed by React to access the database to be used for the web app interface. Lombok is added to use notation for the model of a Food Truck.
The FoodTruck.java model is the food truck entity. This will create a table called foodtrucks in the database. This model uses Lombok annotation for getters and setters and JPA annotation to create an entity and the name of the table, if it does not already exist in the database.
These are configurations that will need to be added in order for spring boot to connect to MySQL.
This interface will be using the JPARepository to use existing CRUD methods that will be inherited to be implemented for the REST API.
This class will use the repository interface that will inherit the CRUD methods from JPARepository to create CRUD methods to be used for the REST API.
This is the controller that will be used by React to implement CRUD methods for the interface.
I modeled my application by separating my frontend using React (view) from the backend Spring Boot (model, controller)
The react application will start on this page with a list prepopulated by using the REST API method getAllFoodTrucks() built in the backend. The table shows the name and address of a food truck and action buttons to update or delete the food truck. At the top of the list is a button that allows the user to add a food truck.
The Add Food Truck button takes us to the Add Truck Form page. The route is given "/add-foodtruck" and a form to add name, address and food type. There are action buttons at the bottom of the form to either submit or cancel. Both buttons will take you to "/foodtrucks" route. If a food truck is added, the list will reload and the added truck will be visible.
Clicking on the Update action button will allow the user to edit a food truck. The similar form is used to prepopulate data from the truck intended to update. Once updated, the route is back to "/foodtrucks" with an update of the food truck details.
To update the food truck, the id is grabbed from the REST API update method and the fields will make a call to the database to update columns.
The Delete action button allows the user to delete a food truck from the list. The intended food truck to be deleted is grabbed by its id making a call to the REST API and deletes the record.
Thank you for viewing my web application!