Hi Dropback!

Had a blast doing the take home assignment.

Can view a quick loom sample here: https://www.loom.com/share/d7193d27e46a48bd944c4ef0970f57df

NOTE:

• for set up you will have to copy/paste the .env.example to .env.local and add in the supabase key and url
• npm install
• run the /api/data-ingestion to load the data into the db
• localhost:3000 to see the changes

Backend Implementation details:

• Used the ESPN API to pull men's college basketball statistics for the 2025 season
• Using the given apps/web/app/api/data-ingestion/route.ts route I used this to pull the player data and the player's statistics into the supabase database
• I used a .env.local file to store the credential information, and urls and then used supabase client
• The basketball API splits the data into the home and away datasets, in this case I stored both, first mapping the data first and then stored the statistics. The player_stats table has espn_player_id that references the id in the player table this is how the two tables are related. It also has an index idx_player_stats_comparison which uses split_type and season as comparisons, it wasn't used because I didn't include filtering on the frontend but would be useful.
• For querying I created some separate api routes, some I ended up not using in the final implementation but would be useful (for example getting stats by id). The GET players/ is the main api I used to fetch the players in the database. The GET players/compare was the API I used to fetch multiple player statistics.
• Tried to use TypeScript typing (interfaces, enum) as much as I could

Frontend implementation details:

• Kept it simple and mainly only added two additional dependencies recharts for data visualization and swr for data fetching (https://swr.vercel.app/docs/data-fetching)
• The dropdown component is in the takehome/ui folder as it could be reused, it fetches the players and renders them
• The state is then held in the page component to be used by the home statistics, now this is very simple we could have instead used a query param/ navigation/ router solution but didn't seem necessary at this point in time
• When the second selection is made, the comparison table and the visualizations table are rendered
• The statistics comparison takes the player ids and fetches the stats from the api, it then renders the home/away data separately
• The data visualization uses recharts barchart to show a visual comparison between the two players, I've also added a toggle between their home/away statistics. Alternatively the home/away could be fed into the api to gather the data back.
• Alternatively the player statistics table and the data visualization could be grouped together to only run the statistics api once to get the data back.

Some alternatives:

• Alternatively for the barchart the home/away selection could be fed into the api to gather the data back.
• Alternatively the player statistics table and the data visualization could be grouped together to only run the statistics api once to get the data back. In this case I wanted to separate the component out and for each component to be independent.

With more time I would:

• clean out the api/actions and api/players/ a bit more
• add testing support (jest, or other)
• combine the home/away stats together into a averaged statistic

Looking forward to hearing from you soon and thank you for the opportunity to interview at Dropback!

@DropbackHQ @nicksiscoe