1. COMP6210 Web Services And Design Methodologies
Answer:
Introduction
Modern UI design and implementation have become part and parcel of web development in
the modern world. Good modern UI can mean a turnover for a company with numerous
competitors using the latest cutting-edge tools to develop scalable web applications. This
report will go through the process used to develop a web application for SCP Foundation.
This web application will be used to showcase various aspects of the company. This
application also takes into account security measures to protect the information from
different pages from unauthorized users.
Technologies
To bring everything together several technologies were used to bring the project to a
fruitful conclusion.
React JS – React is a javascript library for building Interactive dynamic user interfaces. React
makes everything painless to create interactive user interfaces. The thing that makes react
an interesting language for most developers to use to build user interfaces is that you can
design simple views for each state in the application, and react can efficiently update and
render just the right components when data changes. The declarative nature of React.js
makes the code easy to predict and debug. Reactjs is a component-based language that can
manage its state and then compose these components to make complex UIs. Since the
component logic is written in Javascript, instead of templates, you can easily pass rich data
through the app and keep the state out of the DOM. The backend of this application is based
on React but later you will find out that another framework popularly known as Next JS
which is React Utility tool based on React is used to help with a certain vital function in the
modern web development framework.
Next JS – Next.js is a react framework that can be used to solve some problems that plain
react causes. These problems cannot be ignored because at the end of the web app
development phase, the product should be able to run reliably fast and have a good SEO
ranking. SEO ranking is very important for marketing and getting new customers or users to
the business website hence expanding business-aware around the globe. This is where the

2. Next.js framework tool comes in to help with features like server-side rendering, reducing
the bundle size using webpack. These problems can be solved using plain React.js but it
takes effort, with js these tools come built and are convenient to use. This is why we will
also be using Next.js to improve the application performance on the browser on production.
With Next.js comes tools like onboard API which is a server-based in NodeJS in the backend
to help create data stream APIs.
TypeScript – This is a strongly typed language built on top of Javascript which gives a
developer strong tooling at any scale. The reason to use Typescript for this project is to get
features like syntax highlighting which is very important for fast web development. The way
is used here is more of a productivity tool, that our code does not have to run on the server
to know which errors exist in our code but with Typescript, you can get these typed errors
in real-time and debug the code to solve the problem. It also gives very rich information to
help debug with even suggestions sometimes to solve the problem.
Prisma – This is a server-side library that helps an application read and write data to the
database. This is tool is used as an object relation mapper to map our Prisma schema in the
database. This tool also makes life easier for the developer since it handles database
creation and data inputs for you.
Tailwind CSS – This is a utility first framework packed with classes that can be composed to
build any design. With CSS, your style your pages on larger screens first approach while
with Tailwind CSS focus is on small devices first building towards larger devices. This
approach is convenient for building responsive web applications. The other advantage is
that you write all our codes in one with styles in the same file this further can downsize the
bundle size. The other thing is that Tailwind CSS comes with a runtime engine for faster
execution of styles.
Frontend
Most of the work in this application went to the front part in particular. The front-end has 6
pages that contain information on various SCP information. One of the key aspects of
modern web development now is the ability for a web app to be dynamically responsive to
different devices running the web app. Tailwind CSS is a better tool to help in this goal with
inline CSS class utilities. The frontend texts come s from a single JSON data file wherein
some instances we directly iterate through various JSON objects to produce the display. We
have a navigation header across all pages which is a key aspect of the modern web page.
Backend
This is the business logic of the application. Since our app doe not involves a lot of data
fetching from the database except creating a user, a single API endpoint was required to
accomplish signing up users. With Next.js we have an onboard server-side backend that
behind the hoods runs Node.js server to facilitate data storage and fetching. Every file you
put in the API file is a back-end route to our onboard node.js server. This prevents the
Next.js application from running decoupled servers one for the frontend and another for the
backend. When developing our backend security is of utmost importance to prevent

3. unauthorized users from accessing data. It is always in the best interest to secure the
endpoint though, for our case, we have a single public endpoint where users can create
accounts and this does not need to be secured. But let's say we would like to consume user
data from our frontend, then it's best to check first if the user has a session before
conducting any transactions to the database. For Login in users, we use a Next-Auth library
which takes the user input credentials and validates them against the database stored
credentials in the backend, and returns a user session and a token. Modern web
applications use sessions for validating and revalidating on user refresh. This prevents
users from login in every time they refresh their browser.
Agile And Scrum
This is the methodology that is used in the development of software and it is based on
iterative and incremental processes. The main aim of this methodology develops software
that will meet all the user requirements. The process usually starts from an idea on the
development of the application that shall be used in accomplishing certain user
functionalities. The process usually divides the project into four different stages. These
stages are known as sprints and they help the developers to manage and complete the
required tasks within the deadline. The process has a starting point and at this point, the
starting point of the development process was the listing of the objectives of the application.
The main objective of this order was to create a web page using modern and current
technologies. The application shall contain 5 HTML pages with different catalogs. The
application shall be designed using react js and all the content must be changed to JSON and
displayed in the react js format. The application shall then be deployed on the GitHub
application and shall be accessed from there. All the codes can be downloaded and accessed
by anyone. The application shall be able to work on desktop applications and mobile
phones. The project shall then be divided into different sprints and each spring shall be
developed by different teams. The first spring in this can shall include the development of
the 5 HTML pages with different catalogs. The developed pages shall then be used in the
development of the next stage of the application. The second team shall use the HTML codes
to create the JSON files. After the JSON files have been created the third team shall use the
files to create react js application which shall be displayed on the web pages. The final stage
that hall occurs, in this case, is the testing stage. This is the stage that is used to check if the
application that has been created meets all the requirements. If any of the requirement is
not fulfilled then the application shall be returned to the development stage. The things that
were tested in this case are the codes that were used in developing the applications. The
testers made sure that the used codes are HTML and react codes. The testers also made
sure that the application could be used in mobile phones and desktop computers as per the
user requirements.
Testing
The main test that will be carried out for this application is responsiveness to different

4. devices. To facilitate these tests, we will be using our chrome browser which simulates
different phone views and our application has to pass in every device simulator. Below are
the test conducted on different devices.
Conclusion
Modern UI design creates a big impression for users to start trusting your brand online.
With the completion of a more dynamic application, the organization will be able to win
more trust from the public who visits this website. As a result, I have learned a lot
concerning react development paradigms and methods for designing good contemporary
user interfaces and user experience.