Footy-Trivia

A place for Football Community

Comment

Inspiration

Most football trivia apps are outdated, shallow, and lack competitive features. During the FIFA World Cup 2026, we set out to build a premium football trivia platform that combines quiz gaming, real-time match tracking, predictions, and global competition — inspired by Sporcle, FPL, and Wordle.

What it does

Footy-Trivia is a full-stack football trivia platform with 200+ questions across 8 leagues and 8 clubs, featuring:

  • 5 Game Modes — Solo, Blitz (\(2\times\) multiplier), Hardcore, Ranked (\(1.5\times\)), and Daily Challenge with streak tracking. Scoring uses: $$S = \left\lfloor (B_{d} + 8 \cdot t_{\text{left}}) \cdot h \cdot m \cdot k \right\rfloor$$ where \(B_d\) = base points by difficulty, \(t_{\text{left}}\) = seconds remaining, \(h\) = hint penalty, \(m\) = mode multiplier, \(k = 1.2\) for streaks \(\geq 3\).
  • Real-Time Multiplayer Battles — Head-to-head via 6-char room codes with live score tickers powered by Ably WebSockets.
  • Transfer Guesser — Wordle-style game: guess a footballer from progressively revealed transfer history clues.
  • World Cup 2026 Hub — Live scores, group standings, knockout bracket (R32 → Final), predictions, analytics, and tournament leaderboard.
  • Chrome Extension — Manifest V3 floating live-score widget that works on any webpage.
  • User Profiles & Achievements — JWT + cookie auth, avatar uploads via Supabase Storage, and unlockable badges.
  • Global Leaderboard — All-time, weekly, and monthly rankings with country flags. ## How I built it
  • Frontend: Vanilla HTML/CSS/JS deployed on Vercel — custom design system, dark/light themes, Canvas Confetti, html2canvas + jsPDF for shareable result cards, Google Fonts (Barlow, Montserrat).
  • Backend: Python FastAPI on Render — PostgreSQL 16 (14 normalized tables), Supabase Storage, Ably WebSockets, bcrypt + JWT + HTTP-only cookies with CSRF, email verification via SMTP, Dockerized with Docker Compose.
  • Chrome Extension: Manifest V3 with service worker, content scripts, and popup UI fetching live scores from the API.
  • Data Pipeline: Python scripts for scraping squad lists, building player databases, and generating trivia questions from PDFs and APIs. ## Challenges I ran into
  • Real-time multiplayer sync — Managing WebSocket state, disconnections, and simultaneous score reveals across a lobby → ready → question → reveal → final state machine.
  • Anti-cheat scoring — Server-side verification mirrors the client formula exactly: $$S_{\text{verified}} = \left\lfloor (B_d + 8 \cdot t_{\text{left}}) \cdot h \cdot m \cdot k \right\rfloor \geq 30$$
  • Cross-origin auth — SameSite cookie policies, a dedicated CSRF endpoint, and automatic token refresh between Vercel (frontend) and Render (backend).
  • Render cold starts — Built a wakeApiServer() preflight ping with retry logic and a 2-hour inactivity timeout.
  • World Cup data accuracy — Keeping brackets, standings, and live scores accurate during the tournament with robust polling.
  • Question variety — A "recent questions" memory system (up to 40 per category) to prevent repetition across sessions.
  • Implementing the API and getting real-time scores — External football APIs had rate limits, inconsistent formats, and delays. We built a backend caching layer, normalized data from multiple sources, handled match state transitions (scheduled → in-play → finished), and set up intelligent polling to deliver live scores across the web app, World Cup Hub, and Chrome extension simultaneously. ## Accomplishments that I'm proud of
  • Built full-stack from scratch — no frameworks, no UI libraries; entire client is under 600KB.
  • Production-grade security — bcrypt, JWT, HTTP-only cookies, CSRF, CSP headers, input validation, email verification.
  • 14-table PostgreSQL schema — properly normalized with foreign keys, constraints, indexes, and seed data.
  • Shipped a Manifest V3 Chrome Extension that works on every webpage.
  • Responsive & premium design with smooth theme transitions and a football-field hero section. ## What I learned
  • WebSocket patterns for real-time multiplayer (room state, synchronized delivery, score reveals).
  • Cross-origin cookie security — SameSite, CORS, and CSRF working in harmony.
  • PostgreSQL optimization — proper indexing, TIMESTAMPTZ vs TIMESTAMP, efficient queries across 14 tables.
  • Vanilla JS at scale — managing 9,700 lines without a framework requires strong state management conventions.
  • Multi-platform deployment — coordinating Vercel, Render, Supabase, and the Chrome Web Store. ## What's next for Footy-Trivia
  • Champions League Bracket — Extending the World Cup knockout system to UCL: league phase standings, R16 → Final, predictions, and historical data.
  • AI-Generated Questions — Using LLMs to generate trivia from recent match results and transfer news.
  • Mobile App — PWA or React Native wrapper for native mobile experience.
  • Seasonal Leagues — Monthly divisions with promotion/relegation and seasonal rewards.
  • Community Submissions — User-submitted questions with voting and moderation.
  • Live Match Trivia — Real-time questions generated during matches (e.g., "Who just scored?").
  • Internationalization — Spanish, French, Arabic, and Portuguese translations.

Built With

Share this project:

Updates