Building a Real-Time Esports Score Platform with Next.js and WebSockets

The Problem

As an esports fan, I was tired of juggling between HLTV for CS2, VLR for Valorant, and Liquipedia for everything else. I wanted one platform that covered all games with real-time scores.

What I Built

esport.is — a unified esports platform covering CS2, Valorant, League of Legends, and Dota 2 with:

Live scores updating every 30 seconds
Elo-based rankings recalculated after every match
Free prediction game with accuracy tracking
Transfer tracker with hourly updates
AI-powered news aggregation

Tech Stack

Next.js 14 with App Router
Vercel for hosting + edge functions
Supabase for database + real-time subscriptions
Multiple esports APIs (PandaScore, custom scrapers)
Redis for caching live data
Gemini AI for news generation

Architecture

The system pulls data from 5+ esports APIs every 30 seconds, normalizes it into a unified format, and serves it through a Next.js frontend with ISR for SEO and client-side polling for live updates.

Rankings use a modified Elo system that weights:

Tournament tier (Major > qualifier)
Recency (recent matches matter more)
Opponent strength (beating #1 matters more than beating #50)

Prediction Game

The prediction game lets anyone pick match winners before games start. We track accuracy over time and have a global leaderboard. Upset picks (picking the underdog correctly) earn bonus XP.

We also compare community predictions against real-money Polymarket odds and flag "Sharp Picks" where the crowd disagrees with the market.

What I Learned

Esports APIs are inconsistent — different providers format team names, tournament names, and scores differently. Normalization is half the battle.
Live data caching is critical — without Redis, API costs would be astronomical.
ISR + client polling gives the best of both worlds — SEO-friendly static pages that update in real time for active users.