
LoL Live Game Tracker is a full-stack application that lets users follow their favorite League of Legends players and receive real-time notifications the moment they enter or finish a game. Built out of a personal need to stay updated on friends' matches, the system polls the Riot Games API every 2 minutes, pushes live updates via WebSockets, and is backed by a production-grade job queue that handles failures, retries, and crash recovery automatically.
- Real-Time Notifications: Instant Socket.IO alerts when a tracked player starts or ends a game — including champion picked, game mode, K/D/A, and final match result.
- BullMQ Job Queue: Polling runs as a managed background worker with concurrency: 1 to prevent overlapping cycles. Failed jobs retry automatically with exponential backoff and survive server restarts via Redis persistence.
- Redis Caching: Live game states, champion maps, and match results are cached in Upstash Redis — cutting redundant Riot API calls and keeping latency low across all regions.
- Riot API Integration: Full integration with Riot's Spectator, Match, and League endpoints across EUW, NA, KR, and EUNE — including 429 rate-limit handling with automatic retry.
- Challenger Leaderboard: Browse top-ranked players per region with live LP, win rates, hot streaks, and veteran status.
- Queue Monitoring: Internal Bull Board dashboard at /admin/queues — inspect active, delayed, completed, and failed jobs in real time.
- Next.js / TypeScript — Frontend with Redux Toolkit for global state management
- Node.js / Express — REST API with Helmet security headers and rate limiting
- MongoDB — User accounts, favorite players, and live game records
- Redis (Upstash) — Game state caching and BullMQ queue storage
- BullMQ — Background worker replacing node-cron for reliable scheduled polling
- Socket.IO — Real-time bidirectional push notifications
- Pino — Structured production logging
- Riot Games API — Live game data, match history, champion data, and leaderboards
- Vercel / Render — Frontend and backend deployment
Riot API rate limiting was the core infrastructure challenge. With many tracked players, naive polling would exhaust rate limits immediately. The solution combines player deduplication — one API call per unique player regardless of how many users track them — with a 429 interceptor that reads the retry-after header and retries up to 3 times with exponential backoff.
Poll cycle overlap was a subtle but critical bug: if a cycle took longer than 2 minutes, a second cron job would fire mid-cycle, doubling API calls and causing Redis state corruption. Migrating from node-cron to BullMQ with concurrency: 1 eliminated this entirely — the next job simply waits until the current one finishes.
Cross-origin authentication between Vercel and Render required rethinking the cookie strategy. The final architecture has the frontend set the JWT cookie after login and attach it as a Bearer token on API requests, keeping Next.js middleware auth and backend route protection fully decoupled.
Mobile responsiveness was addressed throughout the frontend — the navbar includes a hamburger drawer for small screens, player cards and leaderboard rows adapt to single-column layouts on mobile, and all interactive elements meet minimum touch target sizes.
The system reliably tracks players across all major regions, delivers sub-second notifications via WebSocket, and runs stably on free-tier hosting. The project strengthened practical experience with distributed systems — job queues, Redis caching strategies, API rate limit handling, graceful shutdown, and production observability tools.