Case Study · Draft Night 2026
DRAFT
DAY.
50+
Users
32
Picks
26
Tests
RT
Sync
Real-time NFL draft companion. Bracket predictions, tiered scoring, live reactions, and group prompts to roast GMs — shipped solo for NFL draft night 2026 with Claude Code.
The Problem
Draft night is chaos.
Every year, fans watch the NFL draft monitoring Twitter, their group chat, Google Sheets — trying to track predictions, give hot takes, and roast bad picks. Nobody tracks who predicted what in real time without a lot of manual effort.
What I Built
Four core systems.
01
32-Pick Bracket Grid
Each user fills a bracket predicting all 32 first-round picks. Inline stats show consensus rank, ESPN pick probability, reach/value badges, and team needs — so picks are informed, not random.
02
Live Pick Flow
Commissioner confirms each pick → animation sequence → scores calculate → reactions fire. The entire room sees the same state in real-time. No refresh, no polling. Firebase RTDB listeners handle the sync.
03
Player Selection Panel
Rich side panel (desktop) / full-screen sheet (mobile) with 49 headshots, measurables, pro comps, scouting notes, and team-need matching. Search, filter by position, sort by rank/value/need.
04
Real-Time Multiplayer
Room-based architecture with Firebase Realtime DB. No user auth needed — just a room code and a name. Commissioner role is permanent (room creator). Scores, reactions, and wagers all sync instantly across 50+ concurrent users.
Technical Decisions
Build vs. configure.
1
Firebase RTDB over polling or WebSockets
Draft night is bursty — 32 picks over 3 hours with reaction storms after each. Real-time listeners give instant sync with auto-reconnection and zero infrastructure. Trade-off: vendor lock-in, but acceptable for a one-day event with no backend to manage.
2
No auth — room codes only
Single-night event with trusted friends. OAuth friction at join time is unacceptable when 50 people are trying to join 5 minutes before pick 1. Room code + name is instant. Anonymous Firebase auth handles security rules without user accounts.
3
ESPN probability integration — scrape, not API
No public API for ESPN's Draft Predictor. Built a Python scraper that pulls pick probabilities per player per slot. Name mapping aliases handle mismatches (ESPN's "Rueben Bain Jr." → our "Rueben Bain"). Probabilities baked at build time, not fetched live.
Stack
React 19
TypeScript
Firebase RTDB
Vite
Tailwind CSS v4
Vitest
GitHub Actions CI
Netlify
Try it.
Open Draft Day →
← Back to all projects