NHL Players Dashboard

Introduction

This was a coding challenge as part of the interview process for a developer position at the Boston Bruins. The task was to design a "player card" for evaluating NHL players in 10 hours. The specifics of the design was left entirely up to the interviewee.

Instructions

Copy Project Files and Install

git clone --depth=1 https://github.com/leodube/bruins-developer-homework.git <PROJECT_NAME>
cd <PROJECT_NAME>
rm -rf .git .gitignore
pip install -r backend/requirements.txt
cd frontend
npm install

Note: Requires Node and npm

Start Backend

cd backend
flask start

or flask run

Start Frontend

cd frontend
npm start

Note: Flask must be running on localhost:5000

Features

• To select a player, you first choose the team from the left sidebar.
• The active players on the team roster will be displayed. From here, click on the desired player.
• A modal will appear showing some basic information about the player. To view player stats click on the "Stats" tab.

Built With

Frontend

• The frontend uses React with React Hooks for state management.
• I bootstrapped it with Create React App. I have a custom react boilerplate that provides me with greater customization but decided to use CRA because it was quicker to get started.
• I styled it with Material-UI. I considered using Bootstrap as it provides more customization, but I again went with the quicker option.
• The frontend is a single page application that uses client-side routing with React Router.
• Axios was used for the HTTP client.

Backend

• Extended backend to get players by team roster.

Next steps

Given more time I would...

• Add a search option to quickly find a player.
• Add team logos to the left of the teams list.
• Change the theme colors to match the selected team's primary/secondary colors.
• Add the option to select a second player card and align them side-by-side to compare player statistics.

If the project were to be scaled I would...

• Implement Typescript.
• Use Jest, React-Testing-Library, and Storybook for testing.
• Use a more advanced state management library like Redux.

Final Thoughts

This was a fun little project to work on as part of an interview proceess. I feel like I got to showcase my talents and am happy with the final result, given the time constraint. I found it to be similar to a personal project I created called PenaltyBias.com, which I made to predict which nhl team will get the next powerplay opportunity (I was originally inspired by the work done by Michael Lopez on this). The code architecture also had a Python/Flask backend, and communication via Axios with a React frontend. It is hosted on Netlify and Heroku, which are both free services, so it can sometimes take a while to load.