Who's Wearing That Number?
A case study on a full-stack widget built with Next.js, Supabase, Typescript, and Deno.
#
- -
Look up any NFL player by their team and jersey number! This latest case study tackles two key challenges:
1. Successfully look up active NFL players
2. Do everything as efficiently as possible, keeping third-party calls to a minimum.
The strategy
To be that efficient, I made certain optimizations to make things snappy.
1. Static-site hosting - The frontend uses Next.js and S3 for a low-impact and quick experience.
2. Frontend caching - 'Recently searched' players are cached at the bottom of the widget, minimizing calls to the backend.
3. Serverless API - The backend uses Deno edge functions with Supabase for light-weight deployments.
4. Database caching - Calls made to the third-party integration are cached to a local Postgres table.
The backend
The backend makes a total of two calls to the third-party integration:
1. Fetch information about all teams.
2. Fetch all players for one team.
Doing some quick math, we can figure out that if we made one call to get a list of all the teams, 32 calls to get each team's players, then with 33 calls we could reproduce the entire league's roster. Most teams don't change that often unless either the trade dealine or the draft is coming up, so if we restricted our code to cache these calls for longer durations during the low-traffic periods we could save our server some work and reduce our dependency on our third-party integration.
Caching
The cache table for the responses from our third-party integration is pretty straightforward: store the information used to make a call (method/endpoint/params) along with the response (payload), and we'll be able to return that the next time we request some data instead of making a call.
| id int4 | http http_method | endpoint varchar | params jsonb | expires_at timestamp | payload jsonb |
|---|---|---|---|---|---|
| 1 | GET | /nfl-teams | NULL | 2025-04-01 00:00:00.000 | [{"team":{"id":"22","uid":"..."}}]... |
| 2 | GET | /nfl-players | {"id":"10"} | 2025-04-02 00:00:00.000 | ["athletes":[{"name":"..."}]]... |
| 3 | GET | /nfl-players | {"id":"21"} | 2025-04-03 00:00:00.000 | ["athletes":[{"name":"..."}]]... |
Endpoints
Supabase has great support for edge functions running Deno, making it a perfect place to host the backend.
POST /player-by-team-jersey
Returns a player given a team, and jersey number. Note that most teams have gaps in their number assignments, so a player might not exist.
POST /random-player
Returns a random player, randomly!
POST /teams
Returns a list of the 32 NFL teams. This endpoint populates the team picker dropdown.
And that's all we need for a speedy full stack demo! Let me know what you think 👍
