World Cup 2026 Simulator

A live World Cup 2026 simulator where you enter scores to instantly update group standings, third-place qualifiers, and the knockout bracket.

Comment 1

What we built

WC26 Simulator is an interactive World Cup 2026 tournament simulator. You can enter match scores and instantly see:

  • Group standings update in real time (including tie-break ordering)
  • The top 8 third-place teams qualify automatically
  • Third-place group mapping is applied to fill the Round of 32 slots
  • Winners advance through a full knockout bracket all the way to a champion

The goal was to make a fast, clean “what-if” playground where fans can explore scenarios without spreadsheets.

Inspiration

We wanted something that felt like the best part of a tournament: debating outcomes, testing predictions, and watching the bracket change with every result. The expanded 2026 format (12 groups + third-place qualifiers) makes manual tracking harder, so we built a tool that does the bookkeeping instantly.

What we learned

  • How to model tournament logic cleanly (group tables, ranking, and token-based knockout advancement)
  • How to manage derived state in React using memoization and deterministic sorting
  • How to design UI that stays readable even with lots of data (104 matches)
  • How to ship a full frontend to production quickly using Vercel

How we built it

  • React + Vite for the app and fast local development
  • Tailwind CSS for styling and responsive layout
  • Lucide React for icons
  • Client-side state + localStorage so users don’t lose progress
  • FlagCDN for country flags
  • A small fetch to a Wikipedia API endpoint to obtain the official third-place mapping table, then caching it locally

The tournament engine:

  1. Stores match results (group + knockout)
  2. Computes standings per group from results
  3. Ranks third-place teams across all groups
  4. Assigns third-place groups into Round of 32 slots (using the official mapping when available)
  5. Resolves bracket tokens like 1A, 2B, 3ABCDF, W73, RU101 into actual teams as scores are entered

Challenges we faced

  • Tie-break complexity: We needed stable, predictable ranking and a clear path through tie-break rules.
    • We solved this by implementing deterministic sorting and resolving tied subsets step-by-step.
  • Third-place qualifiers & mapping: The Round of 32 depends on which 3rd-place groups qualify.
    • We solved this by computing the top 8 third-place teams, then mapping them into bracket slots using the official table (and a fallback solver if needed).
  • Keeping the UI understandable: With many stages and matches, the interface can get overwhelming.
    • We used consistent match cards, filters/search, a “Next up” section, and a legend that explains tokens.

What’s next

  • Add shareable URLs for scenarios
  • Add downloadable results (CSV / JSON)

Built With

Share this project:

Updates

Submission history