Hi, Welcome to tech-maze, In today's article, we are going to explore a small project which has utilized React js and SpringBoot. Developer/programmer either front-end or back-end who wants to grow as full stack developer, they can download this project and can play with the code.
This is a small effort to help developers to start their full stack developer journey.
About Project :--
Employee Resignation project is based on React js and SpringBoot, this project can be used by anyone who wants to develop a resignation application for learning purpose or for their organization, this project can provide a proper start and based on the requirement can be enhanced easily, it also has email functionality. Based on the requirement email functionality can be utilized or enhanced.
Steps to be followed to run this project :---------------
Download the project, project will contains React project and Spring Boot project.
now lets proceed with following steps
Step1 :
import spring boot project as maven project in eclipse/intellij, once all the dependencies resolved, start spring boot server
Step 2 :
Server will start on port 8080, open http://localhost:8080/h2 , this url will open h2 database, all the properties has mentioned in the application.properties
create a table with all required attributes, if it doesn't create a table automatically. if name of the table is other than EMPLOYEE then update the table name in Employee model class
Step 3 :
Save all your tables and data in local file so that when you re-run your server, data will be fetched from local file and you will not loose your data. To achieve this, we have to provide dbc:h2:file:C:/temp/test against JDBC URL
( it appears when we open http://localhost:8080/h2 )
here C:/temp/test is the location in my local system where data , schema, table stores.
image for reference.
when we click on connect, it connects the H2 database and following screen appears.
Step 4 :
Open React project using VsCode, VsCode is the best IDE for React based app, but you can open this project using any other IDE as well, such as intellij. After opening the project, run following command
npm install
npm start
above command will start server on port number 3000
Step 5 : now open http://localhost:3000
this will open first page of Employee Resignation Portal.
Since both server are running, frontend and backend will be in sync and whichever operation you perform on UI, will connect with backend code, to verify if data is updating properly , you can check in h2 database by running select query.
i hope project will run without any issue, for further details please have a look in ReadMe file of the project.
for complete code please have a look in the below GitHub project
Git location : https://github.com/rohitmodi07/springboot-react
Feel free to share this article and share your suggestion/thoughts in comment section, if anyone face any issue while running the project, then please provide errors in comment section or you can even send error via mail, i will provide the solution for that.
That's all folks in this article, keep visiting.
A Big thank you for checking out my article, this really encourage me to come up with more topics.