Personal Project / Live Data App
World Cup 2026 Live Tracker
React 19
TypeScript
Vite 7
Netlify Functions
Netlify Blobs
Google Gemini
ESPN API
View Live →
github
The Mission
A live tracker for the 2026 FIFA World Cup. As matches play out, it pulls real results from a public sports feed and works out everything downstream itself — group standings, who's qualifying, and how the knockout bracket fills in. The app keeps no scores of its own; it reads the live truth and recomputes the rest in the browser, so the whole tournament stays current without anyone touching it.
How It Works
The whole app runs in the browser. It reads live match data straight from a public sports feed and derives standings, qualifiers, and the bracket on the spot — no backend database of its own. A small serverless layer handles the AI write-ups so the API key stays off the client. It only polls while a game is actually in its kickoff window, so it stays quiet the rest of the time.
System Architecture
The Views
- Groups All 12 group tables built from real results, showing who's through and who's out, with each group's fixtures and a quick team search.
- Third Place Table The race for the wildcard spots, ranked live — as scores come in, the cutoff line for who advances moves in real time.
- Knockout The full bracket. Until the real knockout rounds begin it shows a likely projection from the current standings, then fills in with actual teams, scores, and penalty winners as they happen.
- Teams All 48 sides — profile, formation, likely lineup, their group results, and their path through the knockouts. Opening a team tints the whole app in that country's colours.
- Stats Top scorers, cards, and tournament tallies, straight off the live feed.
Engineering Highlights
- Lineups from real team sheets A team's starting eleven is a prediction until they actually take the field. Once a real lineup is published for a match, the app swaps the guess for the genuine one and remembers it, so each team always shows its latest real eleven.
- AI write-ups grounded in the data A short daily rundown of the tournament plus quick per-team and per-match notes. They only describe what the live data already says — they never invent scores, scorers, or news.
- Built to share one AI call, not thousands If a hundred people open the app on the same tournament state, they shouldn't each trigger a fresh AI request. A layered cache means everyone watching the same moment reuses a single shared write-up, which keeps it fast and well under the AI provider's rate limits.
- Fails softly If the AI is briefly overloaded, the app shows the last good write-up instead of an error; if the sports feed hiccups, it says "feed unavailable" rather than breaking. Nothing on the page ever just goes blank.