A Walkthrough of my Senior Project Using Java, Spring Boot, React.js, and More

Published in

Strategio

8 min readAug 15, 2022

Introduction

During the senior year of my Computer Science degree, I decided to take a notorious project class about Databases and Web Applications. During the first week, I knew instantly why this class was so daunting to many of my fellow students. Unlike other project courses where you may work with others to complete the project, this was a solo project and required an estimated 10–20 hours of work per week. Despite knowing this, I knew I wanted to tackle this project because I knew that I would learn so much in the process. While it was hard at times, I learned a lot about making a functioning website!

Project Context

The project was to make a web-based e-commerce system that allowed people to search for movies, place them in the shopping cart, and checkout/pay with Stripe. The tech stack that we used included:

Java and Spring Boot (Backend)
MySQL (Database)
React.js and Chakra UI Kit (Frontend)

Each week or two was sprint-like where we were given requirements and some boilerplate code to build upon and finish the requirements. We were also given test cases to make sure our code ran correctly. The whole process was iterative and each week’s new requirements built upon what we had done previously.

Backend Services

Each backend service was a separate Spring Boot application microservice that was pre-configured with Maven as the build tool.

Identity Management (IDM) Service

To start, we were given the task to create an Identity Management service. To complete this task, I first had to learn about how to make a Rest Controller using Spring Boot’s @RestController annotation. I read up on how to use it and did activities provided in class to supplement my learning. After getting a grasp of how it worked, I started to work on getting the requirements done.

For each endpoint, I used the GET and POST annotations provided by Spring Boot to map each endpoint to a function. Each of these followed request and response models which I made POJOs of to make it easier for getting requested information and returning responses to the frontend in the future. After getting the register and login function skeletons working, it was time to tackle a new beast of making SQL queries with the information.

It was my first time using Spring Boot to connect to the database on my computer. It was a bit daunting to start to think about, but I knew that everything I needed would be in the documentation and I could always ask a friend or the professor if I needed any help on a high level. There was some boilerplate code used to configure the settings of the database and after setting up the environment variables I successfully connected the MySQL database on my computer to the application.

To complete the registration and login requirements, it required me to insert the users into the database and make sure the login information was correct and corresponded to existing users. To do so we used the Spring JdbcTemplate class to interact with the database and make SQL queries. After reading through the documentation I was able to implement insert through the NamedParameterJdbcTemplate.update() function as well as select users with the NamedParameterJdbcTemplate.query() function.

After understanding how the API worked, it was a matter of getting the queries correct. I tested out individual queries in MySQL Workbench to make sure they worked before inserting the full queries in the code.

Movie Service

In the movies service, as a class, we were tasked to build the endpoints for searching for movies as well as getting information for a particular movie based on the ID associated with it in the database.

The process of creating this service was similar to the IDM service since it was a similar process of defining endpoints and interacting with the database with the JdbcTemplate class. The most challenging part of the process was getting the search functionality to work with all the different search parameters.

Most of the movie service was this search functionality. To tackle it I made objects related to each endpoint's possible search queries and passed them in as a @RequestBody. Because each had optional search parameters, this would inevitably change the SQL statements I had to create. Whereas previously in the IDM service it was easy to make a generic SQL query with two or three different variables, this was more complicated since some search queries would need to have a few lines added or removed based on the parameter. I was at a loss on how to do this, but our professor gave us a helpful tip on looking at how to make dynamically create SQL queries.

Making a dynamic SQL query was much simpler than I thought, but it was pretty tedious to get everything correct. It involved a lot of if statements and concatenating string variables, but eventually, after hundreds of lines of code, I got it to successfully work and pass the test cases.

If I were to do this differently today, I would try to use a program similar to jOOQ since it seems to make it easier to make dynamic queries without manually concatenating a string variable.

Another issue I had to think about was how to get multiple results for the movies. In the IDM service, we only queried for a single object, but since we wanted to return a list of movies, I had to learn how to return a query with multiple objects.

Here I learned about the JSON_OBJECT() query functionality in SQL that I hadn’t learned about before. This allowed the query returned to us in Java to be a JSON object which we could map to objects using the ObjectMapper() Class from Jackson. This allowed me to get a list of Movie Objects that I mapped from the JSON array I got from the SQL query.

Billing Service

In the billing service, we were tasked to create the cart and ordering functions that involved adding/removing movies in the cart as well as ordering the movie(s) and confirming that the payment went through. The cart functions were easier to implement since it was built off of the SQL query knowledge I already knew. The challenge with this sprint was learning the Stripe API.

To process a user’s order, we have to create something called a PaymentIntent with Stripe. I tackled this similarly to when I learned about the Spring JDBC class and when I had to go through the boilerplate code given to us to understand how to use it in my implementation. I read through the Stripe API documentation and went through a couple of tutorials, and eventually got it working and passing the test cases!

FrontEnd

The frontend was another can of worms entirely for me to tackle. We used React.js to create the frontend application. While I enjoyed it, it’s definitely something that I’m still not comfortable in and would like to explore more. It took a lot of work and a lot of reading and tutorials to understand, but I eventually got a functioning website running. Here are some highlights that I learned along the way.

Connecting the Backend and Frontend

In order to connect the frontend and backend, I had to familiarize myself with the axios library. You can read more about it here! For each backend service, I created a javascript file in a backend library (i.e. src/backend/billing.js) and made functions that took in the search parameters with the required information to make the GET and POST requests. The login function looked something like this as an example.

async function login(loginRequest) {
    const requestBody = {
        email: loginRequest.email,
        password: loginRequest.password
    };

    const options = {
        method: "POST", // Method type ("POST", "GET", "DELETE", ect)
        baseURL: Config.idm.baseUrl, // Base URL (localhost:8081 for example)
        url: Config.idm.login, // Path of URL ("/login")
        data: requestBody // Data to send in Body (The RequestBody to send)
    }

    return Axios.request(options);
}

I called these functions when certain buttons were pressed (in this case the login button) on the Login.jsx page. The Config variable is an import from a separate JSON file I made that had the URL paths I needed.

Using Chakra UI

We had a lot of freedom in choosing how to design the frontend. I knew I wanted to use an existing UI API library since it would save me the hassle of styling each component myself and I knew I didn’t have the time for that. The problem was choosing which one.

After hearing horror stories from friends of mine who had developed their own websites, I decided not to use Boot Strap. (Nothing against those who use Boot Strap UI kits, I had just heard it was a doozy to work with). I asked a few friends for recommendations on what to use instead, and was suggested the Chakra UI Kit! I took a look and found I liked the designs and it seemed very simple and easy to learn with lots of examples and tutorials online to look at.

Conclusion

After about 10 weeks of work, I had finally finished! While this project was ultimately very time-consuming to juggle with other classes and part-time jobs, it was worth seeing the knowledge I gained in the end.

Lessons Learned

Documentation and readable code are important! This was a good experience in having to read through documentation and learn to use existing libraries/code pre-written in the boilerplate given to us and understanding and learning how to implement that in the parts of the code I built myself. I feel like that’s something I’ll be doing in the real world and this was good practical experience!
Google is your best friend. There were so many times in this project I had to look up errors and tutorials and the solution was always found somewhere online!
Time management was key in this project. I learned to prioritize my time more wisely with this project in order to meet the deadlines.

Resources

Since going into detail with every part of this project would make this piece way longer than it needs to be, I’m going to leave a few resources here on the different things that I learned about throughout the process!

If you’ve made it this far, thank you! I know this one was quite long. Hope you learned something! Comment if you have any questions :)