Project report for PRT 3

1. Title: Project 3 Individual Report
Compiled by Opatile Odirile Ross Kelobang
Student Number: 218335105
Subject: Project 3

2. Project Development
At this current point, our team has almost completed the backend work. Our next deliverable was
creating controllers to access entities as conceptualized in our UML.
Figure 1: UML Diagram of Entities
At this point (after completing my deliverable), I can test HTTP requests using Post Man. Some bugs
were fixed in the application during this phase, and all indications are that I can query the endpoints
successfully.
This is good because when implementing a SQL database connection on the back end we will be able
to execute queries successfully.
Additional Steps
While planning for the integration of the front end using React.JS and Redux, I opted to integrate
thymeleaf front end to create a landing page for our application. This was outside of the deliverable
scope, but done in order to prepare the team for the demanding task of integrating a React front
end, and also present our application as a complete system, rather than an application that exists
only on an IDE and parses JSON data.

3. Figure 2: Current Application State with Thymeleaf front end
Front End Integration using React and Redux or Angular
React Overview
React is a JavaScript library that allows for component based front-end development. This allows
developers to build front-end applications faster due to its reusable components. While this front-
end development works for stand-alone applications, for our use case, we need to integrate a state
management component, in this case REDUX, to ensure that front end requests get handled and
transferred to the Spring Boot back end.
REDUX Overview
Redux is a state management library, which will be used to manage our application state. This is
because we will not be having any session on our Spring Boot server. We will be managing security
through JSON web tokens, and REDUX will store the application state. This presents the perfect use
case as our application is data intensive and utilizes extensive API calls.
Figure 3: React/ Redux front-end architecture

4. Angular Overview
Angular is a typescript-based framework for building JavaScript mobile and web
applications. Although Angular also utilizes component-based design for front end
development, connections to JSON/ REST APIs happens a service class that utilizes an
HHTP Client. This allows Angular to pass data to the database.
For our use case, this is the best approach as React will require Redux for state
management, and would add complexity where none is required.
SQL Integration and JPA
Upon completion of development and testing, our system is now ready to integrate into any
enterprise environment. Spring Boot allows for scalability through SQL and JPA. This means

5. that although we have our own custom UML, we can change the entities to suit any
database design. From an implementation standpoint, our team will be required to manage
the relationships on the backend.
Spring Boot JPA will manage the database persistence and create the tables for the system.
Our main objective is to ensure that all relationships are mapped correctly when
implementing our system. The same logic would apply if we are integrating onto an existing
database.
Response Plan to project pitfalls
After experiencing several issues related to code errors, I called a crisis meeting to discuss a
resolution. The team resolved to correct each entity that was showing bugs with the sole aim
of getting the project back on track. Once this was achieved, another issue that became
apparent was a flaw in the UML design. Due to this, database relationships could not be
mapped correctly.
This prompted the frontend development team to consider a new backend structure that
would correct this. Using JPA REST data service to manage the issue of having to write
each individual controller for exposing JSON data required to connect the Angular service to
the backend.

6. Current Frontend using Angular
Once the team resolved to adopting the new plan we proceeded to connect the front end
which pulls the correct data with mapped database relationships.
Figure 4: Front End with Data
Figure 5:Database structure with product data
Figure 6: Backend with database mapping and crossite API access