React.js and Spring Boot: Farmer Friendly Web App

A full stack project to connect farmers and bio-material processing industries for farm-waste exchange.

As part of the Web Development Squad of Interestship 4.0 organized by Clique Community, I got a wonderful opportunity to collaborate with like-minded women from the tech industry and build an innovative project within a short time frame of 4 weeks. Thus, this article covers the various aspects of the project.

This project aims to help farmers to connect with bio-material processing industries for farm-waste exchange easily. This will surely help the farmer community to sell the farm wastes faster and gain more revenue!

A farmer friendly web application would allow the farmers to easily access the website with its user-friendly interface and be able to sell their wastes without much of a hassle. The only government ID they require for registration is their Aadhar number, which is widely used in India.

The revenue for their wastes would be pre-decided so there won’t be any room for negotiations, which will make sure that the farmers are not being underpaid for the wastes.

Now let’s begin developing the project by diving into the backend.

Backend Development

Backend development is all about handling the functions and data that is not seen by the user and ensures a smooth user experience. This can be done using various tech stack such as NodeJS, PHP, Spring Boot, MySQL, MongoDB etc.

For this application, the tech stack used for backend is:

• Spring Boot
• MySQL

1. Project Setup

The project was initialized using Spring Initializr, which is a tool that quickly generates the structure of our Spring Boot project.

Now for the final step of initializing the project, we need to add dependencies. The first question that we had when starting with the project was, ‘What is a dependency?’.

Dependencies are, simply put, an object that can be used. Here we use a technique known as Dependency Injection where one object supplies the dependencies of another object as a part of Maven (a powerful project management tool).

The dependencies that were used in this project are:

1. Spring Web
2. Spring Data JPA
3. Spring Boot DevTools
4. Spring Security
5. MySQL Driver
6. Thymeleaf
7. Tomcat Embed Jasper
8. Thymeleaf Extra Security
9. Spring Security Test

Also if you had some issues with the dependencies (like I did), make sure to check their version, and the versions of Java and Maven too. If all else fails, then we all have www.stackoverflow.com to turn to, right?

Since this was also the first time I worked on Spring Boot, I watched this video to learn while simultaneously practicing it -> https://youtu.be/XkVpb_8IPUM

Now that the first part of the backend is complete, let’s move on to creating the classes, interfaces and controllers!

2. Creating the Classes, Interfaces and Controllers

2.1. Figuring out the required POJO’s

POJO (Plain Old Java Object) is an ordinary object and increases the readability and reusability of the Java program. A POJO class helps in defining the object entities.

We had to create 2 POJOs for our project: User and Waste.

User POJO contains the following:

After looking at the User POJO you must be wondering what @Entity, @ID and @GeneratedValue are. They are known as annotations which help in conveying some additional information to the user. There are many types of annotations, but the ones which we are using in this project are mainly used to exchange information to our database and in APIs (Application Programming Interface).

For the wastes, we had 6 different types and each of their POJO consisted of only 3 entities as shown below:

We are now done with the POJOs!

2.2. Repository Interface

This basically provides us with a way of interacting with our database for all read and write operations. Each POJO requires one repository for this purpose.

2.3. Service Classes

Service classes are annotated with @Service and are used to write methods separate from the Controller classes. With this, you can make your code more readable and increase its reusability!

2.4. Exception Class

Exceptions are basically errors that occur during the execution of a program and to handle them, Exception Handling is done. There are predefined exception classes for different types of exceptions; here we have defined a custom exception class known as ResourceNotFoundException.

It signifies that if a resource doesn’t exist, like if we ask for a user’s name based on their ID, but the ID has yet to be generated for a user, then we can call this class with a custom message as its parameter.

2.5. Controllers

This might be the most important part of the backend for this project. The controller classes include methods to process input data, execute some specific actions and much more. They are basically responsible for the proper working of the project. Here, we are creating a RESTful API for CRUD operations, so our methods consist of creating, reading, updating and deleting.

Here is a small code snippet from our project. (Remember, comments will always help you write understandable code and remember the use if you’ve been away from the project for a while).

3. Connecting MySQL

To store and use the data that we get from the users in this application, we need a Database Management System (DMBS) software. For this, we have used MySQL. MySQL is an open source Relational DBMS software which is widely used and can be used for both small and large applications.

There are certainly other options for a DBMS software that could have been used such as MongoDB, PostgreSQL, MariaDB etc.

Personally, I followed this video to set up MySQL in my system -> https://youtu.be/OM4aZJW_Ojs and after it was set up, to connect our project to MySQL, we need to add some changes to our application.properties file in resources.

In spring.datasource.url, createnew is the name of the schema in our database where all the tables for our POJO’s will be created.

We will create the a new schema in MySQL workbench with the same name, and after we run the application, the schema in the workbench will have all the tables and the tables will look like this:

If the tables are created, then congrats! Your application works correctly and the only thing left to do is to test the API!

4. Testing with Postman

An Application Program Interface (API) is a medium which allows communication between two or more programs. They ensure that information is quickly delivered to the users by bringing the applications together and allowing for an easier method of sharing of data that are needed to execute the required functions.

The APIs created in the backend need to be tested to confirm their proper functioning. The application that is used for the same in this project is Postman. It’s a user-friendly application that also provides code snippets for sending requests as well.

There are other applications that can be used to test APIs such as Insomnia, HoppScotch, Paw etc.

Since this was my first time using Postman, I followed this video for its setup -> https://youtu.be/3eHJkcA8mTs.

After the setup, we are ready to test the API!

Example of the POST operation:

Example of the PUT operation after the POST one:

Now let’s see whether this data is visible in MySQL Database:

With this, the backend of our project is complete!

This is what the final project structure looks like:

Since this was also my first time working on the backend, I definitely faced a lot of issues, but the best part of working in a group is you get to learn with everyone and the motivation to work on new things is endless!

Our project would look incomplete without a beautiful interface… Let’s begin developing the front end of our project.

Frontend Development

The user interface of a website/application which we directly interact with is known as the frontend. A good frontend helps the user in navigating through the application easily and efficiently.

The tech stack that was used in the frontend part of this project is:

• ReactJS
• CSS
• Bootstrap
• Material UI

Now, to start with the frontend, we need to run the command ‘npx create-react-app {app-name}’ in the terminal to initialize our react application and a github repository.

For better and more optimized styling and routing, other packages/frameworks that were installed are:

1. react-router-dom: Allows dynamic routing and is a server-side routing library for React. Single Page Applications can be created using this.
2. Bootstrap: Bootstrap is a powerful framework for responsive front-end development. It contains multiple components such as icons and sizing which can directly be imported in the program without the use of CSS.
3. Material UI: Material UI is a library used for integrating different components to create an efficient user interface in our program.

This part is divided into the following three sub-parts:

1. Basic Structure and Styling

Basic Structure was made using functional components for each page of the application. The components included a Landing Page, Login/Registration Page, and Farmer Dashboard where they could see their total revenue collected and sell their wastes.

The Styling was done using CSS, Bootstrap and Material UI. A code snippet for the same:

2. Routing

Routing is done using the react-router-dom which allows us to redirect from one section of a page to another on the same page, or another page by adding to the URL of the website. This redirection also allows for faster loading and efficient navigation of the web application for the user.

Now that both Frontend and Backend Development is done and working fine, the only thing that remains is to integrate them and get our full stack application!

Integration of Frontend and Backend

The most important was implementing the Axios library which helps in sending requests to our APIs, which in this case are made by Java Spring Boot.

In the above code snippet, we are using the PUT method to update the value of the quantity and revenue of a particular waste according to the user’s choice. It sends the parameters to the same URL which is used in our backend.

To handle an error that may come using this method, we use exception handling where on encountering an error it gives an alert of the message inside it. If successful, we get the “successfully registered” alert.

To test the integration, we can run both the backend and the frontend, and then enter some data, which in the above case is the quantity of waste, and then check whether the value has been updated in the database, and in our project, the dashboard where the farmer can see his selling history and revenue generation.

Now the full stack application is integrated and tested!

To summarize, Spring Boot and MySQL were used in the backend and ReactJS, CSS, Material UI, and Bootstrap were used in the frontend. This project provided us with various tasks such as creating and testing APIs, connecting the database, creating responsive frontend, redirection of pages, integrating and testing the backend to the frontend.

This brings us to the end of our journey. Making this application was a challenging but an amazing learning experience for all the members of the team. We believe that this project is a small step into making applications accessible and available for farmers; to help them with their work and make their lives a little easier.

Check out our GitHub repository for this project -> https://github.com/Interestship-4-0/farmer-friendly-web-app