2026 · Solo build
Offline-first companion PWA for the FIFA World Cup 2026: every match, team and player bundled at build time, with live scores pushed over a single Firestore document instead of polling.
Tech: React 18, TypeScript, Vite, Tailwind CSS, Firebase, Framer Motion, PWA
Context
Built for the CM Vibe Code contest with the spec locked in 24 hours and the first version shipped in a weekend. The goal: a World Cup companion that works with no account, no tracking, and no dependency on a live API to be useful.
Features
- All 104 matches, 48 teams and 1,248 players bundled as static JSON at build time, so the app is fully browsable offline
- Live score overlay powered by a single Firestore
onSnapshotdocument, so one read serves every concurrent viewer regardless of how many matches are live - A small VPS-based poller writes score diffs server side (20s cadence during live matches, 300s when idle) so the browser itself never polls
- Push notifications via Firebase Cloud Messaging topics broadcast goals, kickoff, half-time and full-time to every subscriber in a single call, plus personal reminder pushes 15/30/60 minutes before kickoff
- Client-side search across every team and player with zero network calls
- A 25-city timezone switcher that re-renders every schedule instantly, and a knockout bracket that auto-fills with real teams as the tournament progresses
How it was built
A CLAUDE.md file locked a small set of hard constraints for the whole build: no auth, no timezone library, no icon library, no browser-side polling. Those constraints kept the bundle small and the offline story honest, and they were enforced across all 43 commits of the initial build.
What is different
Most fixture trackers assume you are online and reach for green as the default football color. WC26 deliberately uses a tangerine accent instead, treats offline as the default state rather than a fallback, and keeps the entire data layer client-side so a flaky stadium wifi connection never breaks the app.