Cloud-based Data Processing Site for GFR

Concept Ideation • Rapid Prototyping • UX Research • UI Design • Web Design • Workflow • Interaction Design • Visual Design • Animation Design

Agile Development • Frond-end & Back-end Development • HTML/CSS • React.js • AWS • Github • Jira • Figma • Bash

**Project Vision**

A web app developed for the Global Formula Racing Team. Designed in Figma and included interactive prototypes that featured component animations, page fade ins, and link transitions. Developed with React on the frontend and an AWS Amplify backend that was connected to an AWS DynamoDB instance. Tasks were tracked through Jira and version control in Git/GitHub.

Project Process

User Research & User Interface Design

Interview (Ask the needs for target users)
Setting up the schedule of weekly team meeting (Work report & demo, problem solve)
Research
- Understanding the goal of the project
- Creating user personas
- Creating use cases
Brainstorming & Ideation
Mock up a sketch
Creating wireframe & User flow
Prototyping
- Figma
- Icon
- Logo
Reporting & Testing
- Usability reporting
- Analytics reporting
Modify the prototype design
Demo & Meeting

Front-end & Back-end Development

Meeting (Design team and development team work hand over)
Understanding the prototype
Front-end developing
- HTML&CSS
- Javascript & React.js
Testing
- Usability testing
- Split testing
- Code debugging
Back-end developing
- Creating database
- Writing queries
- Connecting front-end to API
- Connecting between webpage and database

Testing
- Usability testing
- Code debugging
Demo

Concept & Ideation

According to our understanding of the needs of target users, the purpose of this project is to enable GFR users to quickly search, view, import and export the data of target racing cars, and to monitor and update the data in real time. In addition, the target users also want to be able to download and upload data about racing cars on the site.

Since the theme of this project is about GFR racing car, we mainly use a dull red color in the homepage of the website, but we don't want to use bright red because it will cause visual fatigue of the users.

In the main page interface, we directly displayed the files generated by the website's database. we did not include too much webpage background or make the user jump between too many different pages because the purpose of this project is to directly show the users the data of the racing cars they want, so we directly displayed the files that have been generated by the database of this website on the main page. It also provides users with three different file formats to generate (.mat, .json, .csv). If the user wants to modify or update the data in the car, then the user can click the name of the file to go into the data file of the car to modify or view the data.

In the home page, we also provide users with date filtering and various sorting features, to make it easier for users to query and filter the data files they want.

The notification page provides the user with a real-time update panel that shows the user real-time updates and changes to the data made by all users of the site. It also provides a panel for users to receive chat messages and receive emails.

Technologies

Amazon Web Services

Our project is built on Amazon Web Services, a very powerful and versatile cloud platform. AWS provides hosting, database services, authentication, and any other computing power we may need. The beauty of AWS is that everything is modular and designed to interact, so if GFR finds they need a different kind of database or computing function, it can easily be created and implemented.

React

Our frontend is built on React.js, one of the most popular Javascript frameworks. React's state system is the perfect match for our needs, allowing for our database to be easily displayed. In the future, it is easily extensible to take advantage of any cloud computing functionality GFR may need.

AWS Amplify

AWS Amplify is a serverless full-stack framework, and it is the foundation of this project. With Amplify, charges are only incurred based on usage, which is perfect for GFR's use case. Cars are only run during certain seasons and on an inconsistent schedule, so we are only charged during active times. Within Amplify, we have chosen to use React as the front end framework, DynamoDB for the database, and Amazon's API Gateway to facilitate communication between all of these services.

Amazon API Gateway

The glue holding all the individual pieces together is the Amazon API Gateway. All the communication between the frontend and backend is done through the API gateway, which was created using GraphQL to make integration with the frontend as easy as possible. We also combined the API Gateway with Cognito to ensure only those with access can use the site.

Amazon Cognito

GFR requested an authentication system, so we chose to go with Amazon Cognito. Access to the site can be controlled by administrators and user groups. There is currently email verification, as well as the option to add 2FA and phone number verification.

DynamoDB

Moving the database to the cloud was not a decision we made lightly, but the speed and accessibility benefits far out-weight the costs. We created a DynamoDB instance which stores all of the backend data and interfaces with the front end site. Costs are only incurred when the database is used, keeping costs at a minimum.

GraphQL

GraphQL is a data query language built for APIs. It integrates with our DynamoDB and API Gateway instances very easily. GraphQL is the link between our frontend and backend, and is an integral part of the project.

Front-end Structure Diagram

Workflow

Entity Relationship Diagram

Part of React example code display

// A component that uses React to create an OnClick trigger function. The developer can provide different className and onClick parameters to make the button behave differently. Props is a very common pattern in React.

Jira Agile Project Management