← Back to Artifacts

FootBowl

Project

A mobile-native World Cup 2026 prediction game — pick group-stage qualifiers, advance teams through a knockout bracket, answer bonus stat questions, and compare results across multiple private prediction pools.

Live Demo →

Tags

Next.js 16React 19TypeScriptSupabaseVercelgamesportspwanextjs

FootBowl — "Call the Cup. Win the Bowl." — is a mobile-native prediction game for the 2026 World Cup. Players create a lightweight nickname-and-PIN profile (no email required), pick the 12 group-stage qualifiers, advance teams through a full knockout bracket from Round of 32 to the Grand Final, and answer nine "Diving Deeper" bonus questions before a global submission lock on June 28, 2026.

Multi-Pool Architecture

The app supports isolated prediction pools scoped to the same bracket competition. The universal pool lives at /, and named subgroups live at /<slug> (e.g. /muddcup26, /family) — each with its own leaderboard, share links, and a dynamic per-pool PWA manifest so installing from a group's URL reopens straight into that group. A single login is recognized globally across every pool the player has joined.

Prediction Flow

  • Group-stage picker for 12 groups of 4 teams, plus a dedicated best-third-place selector requiring exactly 8 teams
  • Sequential knockout wizard with swipe-to-pick match cards and automatic penalty-shootout annotation for tied scores
  • Cascading clears — changing an upstream bracket pick invalidates downstream picks automatically
  • Per-match score predictions with plus/minus controls
  • Nine Diving Deeper bonus questions: First Heartbreak, Brick Wall, Penalty Count, Golden Boot (ranked top-three pick, scored 50/30/20 by matching the official top scorer's rank), Juggernaut, Total Tournament Goals, Total Tournament Cards, Goalless Draws, The Sieve
  • A Final Polish step requires every bonus question answered before submission; predictions stay editable until the global lock, with ties on the leaderboard favoring the earliest final submission

Numeric-total bonuses (goals, cards, attendance, etc.) score on a graduated proximity curve — full points within ±5% of the actual result, tapering through ±10%/±20%/±30%, zero beyond that.

Live Scoring Pipeline

A Supabase Edge Function (sync-matches) ingests fixtures from a tiered provider chain — API-Football → BallDontLie → ESPN's public scoreboard as a last-resort fallback — and computes both live match results and the Diving Deeper answers into a tournament_stats cache row. pg_cron triggers it hourly as the primary scheduler; a daily Vercel Cron job is a redundant backup (Vercel's Hobby tier caps cron to once a day, so it can't carry the live-scoring load alone).

Product Details

  • Optimistic saving — prediction edits commit instantly to memory and localStorage, then flush to Supabase asynchronously via a 400ms-debounced background queue, so the UI never blocks on network
  • PWA with offline service-worker caching and custom iOS/Android install prompts
  • Home view — live feed + leaderboard as the default post-submission landing page, with a "My Bracket" results view showing the player's knockout picks against live results
  • A TournamentWinner celebration view unlocks once the Grand Final is complete, with dependency-free canvas confetti, escalating haptics, and animated count-up stats — all respecting prefers-reduced-motion
  • Admin panel (PIN-gated) for setting the actual champion/runner-up and correcting match data mid-tournament without a code deploy

Tech Stack

Next.js 16 App Router, React 19, TypeScript, Supabase (Postgres + Edge Functions + pg_cron), deployed on Vercel. All persistence is per-pool through a group_members join table so a player who joins multiple pools carries an independent ranking in each.