Soccer Pixels
A live FIFA World Cup 2026 companion that explains the math behind the matches.
The problem
Every four years the World Cup gets a flood of apps that show scores, and a separate flood of articles that explain how the tiebreakers work — but the two never live in the same place. You can either watch the table move or read about why it’s moving, never both. I wanted one surface where the live position and the rule that put it there were visible side by side.
The approach
Two pages don’t belong next to each other — they blend. /groups/A shows the live table and highlights which tiebreaker rule (points, goal difference, goals scored, head-to-head, fair play) is currently breaking each tie. /match/:id shows the live score and explains formations on the pitch — what each team’s shape is doing, what they need to advance. The brand language is shared with Dugout Pixels: same pixel-art card vocabulary, retro tier strips, color-coded states for live / final / not-started.
How it works
Monorepo with a Vite + React app and a Cloudflare Worker. The worker proxies a live data source and caches responses in KV — the free tier of API-Football blocks 2026 fixtures pre-tournament, so live data is held in mock mode until June 11. Frontend is installable as a PWA so it runs as a home-screen app during the tournament. Same React 19 + TypeScript + Vite 7 stack as Dugout Pixels — the brand family deliberately shares vocabulary so a “Pixels” app feels familiar across sports.
Results
- Live before kickoff — deployed at soccer-pixels.vercel.app on mock data, holding for API-Football tournament window
- Tiebreaker overlay — group tables show why teams are where they are, not just the standings
- Worker + KV cache — same architecture as the Interlude, sized for a 48-team tournament
- Sibling to Dugout Pixels — shared brand, shared stack, different sport