Our Solution


To solve the project's problems, NOBL Media requires two components: the web application and an Application Programming Interface (API). These two components allow NOBL Media to solve the problem with their business flow through the implementation of the following features:

  1. The web application must be able to abstract data coming from the NOBL Media database and represent these to customers through graphs and charts.
  2. The web application must be able to create and authenticate customer accounts to allow secure access to the customer's data.
  3. The web application must allow customers to download customer ad data in a formatted file such as in a CSV or Excel file.
  4. The API must be able to retrieve data from the NOBL Media database and send this data to the web application.
  5. The API must be able to handle authentication requests from the web application.


Architecture




The system is divided into three parts: Auth0, a third-party component that handles authentication. After authenticating via Auth0, the user will reach the front-end web application powered by Gatsby.js, the framework that is responsible for quickly rendering the static elements of the webpage while ECharts is used to display the graphical depictions of NOBL's data. The two technologies work in tandem to produce the form and functionality of the web dashboard frontend and are expected to be the main interface to NOBL's data that NOBL's customers make use of. In order to populate the web application with graphical data elements, data is queried from a MySQL database. The REST API translates HTTP requests into equivalent SQL queries, queries NOBL's backend MySQL database, aggregates the data, and returns the result in JSON notation for ECharts to process into graphical elements. The API's responsibility is not limited to the web application and may be used outside of it for organizations that wish to process the aggregated data themselves for their own reports or to display on their own websites. This interaction between the web application and NOBL's backend MySQL database via a REST API forms the core general loop of information flow within the project.

Our Technologies


Language

TypeScript

Language Logo


Website UI Library

React

Language Logo

Website Rendering

Gatsby

Language Logo


Data Visualization

ECharts

Language Logo

User Authentication

Auth0

Language Logo


API Design

REST API

Language Logo

Schedule

Spring Schedule

Current as of 17 April 2022


The image above shows the team's schedule for the Spring 2022 semester. As of 17 April 2022, the team has successfully proven software feasibility with an alpha demo shown to the client. Additionally, the team is currently debugging and ensuring that the software is absent of any bugs while finalizing some implementation of stretch goals. The team is on track to complete the project with an amazing product to show!


Fall Schedule

Current as of 17 April 2022


The image above shows the team's schedule for the Fall 2021 semester. As of 29 November 2022, the team has proven feasibility of the project by showing the different technologies that the team intends to use. Additionally, the team has also obtained the functional and non-functional requirements for the project. With the feasibility and the requiremnts gathering complete, the team looks forward to the implementation of the project next semester!

Team Truthseeker 2021