2025 · REAL-TIME | FULL-STACK
Live Game Tracker
NBA live scores, box scores, and standings that refresh every 30 seconds automatically.
Tech Stack
Overview
A dashboard that polls live NBA data every 30 seconds and shows scores, game clocks, and per-player box scores for any active game. The FastAPI backend caches responses for 30 seconds to stay under the NBA Stats API rate limit. Off-season, everything runs off a fallback dataset, which turned out to be half the engineering work anyway.
What I Built
- Real-time NBA scores with auto-refresh every 30 seconds
- Live game indicator with pulsing red badge and game clock
- Box score modal: top players by minutes for any game
- Team standings sidebar: top 5 per conference (East & West)
- Graceful fallback to sample data when no games are scheduled
- TypeScript throughout, with typed Game, Standing, and PlayerStat interfaces
- Dark theme (bg-gray-950) with a responsive 2-column layout
- FastAPI backend with 30-second caching to avoid API rate limits
Screenshots
Dashboard Overview
Filter Controls
What I Learned
Vite scaffolding fails when src/ exists, so manual file creation is more reliable in CI environments
nba_api live endpoints rate-limit aggressively off-season, so always build fallback sample data
import.meta.env requires vite-env.d.ts for TypeScript to recognize Vite environment variables
Starlette does exact string matching on allow_origins, so use allow_origin_regex for wildcard Vercel preview URLs
FastAPI + uvicorn workers need explicit 0.0.0.0:$PORT binding for Render deployment