nicholas-nguyen8742/orlando-magic-dashboard

Orlando Magic Analytics

Just was a speed run through of the broad space that was mentioned in the Software Engineer - Basketball Analytics position for the Orlando Magic team.

Built with:

Front-End

Back-End

Libraries

D3js Library

D3js

Utilized open source datasets of NBA player stats to be able to practice data visualization for the Orlando Magic.

Donut Chart - Points Per Game

Connected front-end to back-end API point that used mySQL & knex.js to query the data for players and their PPG score. The players names are noted by their initials.

Bar Graph - Assists & Rebounds Per Game

Connected front-end to back-end API points to have an interactive bar chart that switches data on toggling of a button. The component uses React Hooks to accomplish this change, with the initial state being Rebounds Per Game and toggles to Assists Per Game. Players names are denoted by their initials.

React Router Dom

React Router Dom

Use of dynamic routing to have the user logged in ID in the URL. Used Single Page Application technique with switch and Browser Routers.

Components

Signup Form

Signup form has server side validation where the error message is displayed in a message at the bottom of the form.

Login Form

Login form validates using a JWT key that is in the dotenv file that verifies that the hashed password comparison is the same and was produced by our server alone.

Player Card

Player Cards have basic stats that are pulled from the back-end API points, future use could direct towards player pages with analytics specific to the player.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Run Locally

Dashboard Analytics Client

Clone the project

  git clone https://github.com/Nicholas-Nguyen8742/Orlando-Magic-Dashboard

Go to the project directory

  cd vertigo-network-client

Install dependencies

  npm install

Dashboard Analytics Server

Clone the project

  git clone https://github.com/Nicholas-Nguyen8742/Orlando-Magic-Dashboard-Server

Go to the project directory

  cd vertigo-network-server

Install dependencies

  npm install

Run knex migrations & seeds to setup & populate the mySQL server.

    npx knex migrate:latest
    npx knex seed:run

Run the script on vertigo-network-server terminal.

    node index.js