Building a World Cup Simulator
How I vibecoded my way into the best world cup simulator on the internet.
Overview
It's 2026 and my head was in two places: the World Cup and vibecoding. SimWorldCup.co is a sandbox for soccer fans to predict and play out every possible what-if for the tournament. You can manually input scores or let the simulator do the heavy lifting. The Realistic mode uses betting odds, Elo ratings, and FIFA rankings to run the bracket. The Wild mode is pure randomness — anything can happen.
I built this alone, mostly in the evenings, using Cursor and Claude. The goal was to deliver excellent UX that balances deep analysis with pure playfulness.
Why I Built This
The new 48-team format creates a tournament so complex it's almost impossible to track mentally. With 400+ possible permutations just in the Round of 32, getting to the final involves a web of bracket paths that no spreadsheet can comfortably hold. I wanted a tool that could handle that complexity while still feeling effortless to use: something a casual fan could pick up in 30 seconds and a data-obsessed one could spend hours with.
The other reason was simpler: I'd been doing a lot of vibecoding and wanted a real project to test the workflow. A World Cup simulator felt like the right scope: meaningful enough to push me, contained enough to actually ship.
Groups
The group stage shows all 12 groups across tabs. Each group has a standings table (Played, Wins, Goal Difference, Points) with rows color-coded to indicate qualification status: green for automatic advancement, blue for the best third-place candidates. Below the table, the three matchdays for each group are laid out with score inputs.
Teams ranked 1st and 2nd in each group advance automatically. The best 8 third-place teams also advance to the Round of 32, which required building a cross-group comparison view to make that logic legible to users.
Group Stage — desktop view, Group A standings and match cards.
Group Stage — mobile view.
Simulation Modes
Before simulating, users pick a mode. Realistic uses current FIFA rankings, Elo ratings, and betting odds to weight outcomes: stronger teams win more often, but upsets still happen. Wild is pure randomness. No weights, no rankings. Qatar can win it all.
The mode picker appears as a bottom sheet on mobile and a centered modal on desktop. The two-option layout keeps it simple: one choice, made once, that sets the tone for the whole simulation.
Mode picker — mobile bottom sheet.
Knockout Bracket
The knockout phase is where the desktop experience earns its keep. The bracket tree shows the full tournament path from the Round of 32 to the Final, with winners cascading through as each round completes. On desktop, the bracket is visible alongside the selected round's match cards, so you never lose the overall picture while entering individual results.
On mobile, the bracket collapses into a tab-based view: R32 → R16 → QF → SF → Finals. Each tab shows only that round's matches, keeping the interface clean without sacrificing completeness.
My Favorite Detail
At the end of a simulation, users get a shareable prediction card. It shows the champion, the full podium, and which teams were eliminated at each stage — all in one image, designed to be screenshotted and posted.
The challenge was making the card feel personal regardless of who your team is. There are 48 countries in this tournament, and fans of any of them should feel like the product was built for them. I used Generative AI to create a unique celebration image for each nation, so whether you're rooting for Portugal or South Africa, your card shows your team lifting the trophy.
The card has two slides: one focused on the bracket results, one showing the AI-generated celebration image. Both are exportable. The Share button triggers the native share sheet on mobile.
Your Prediction — shareable card, mobile.
Shareable cards.
Reflection
This was the most fun I've had building something in years, and probably the fastest I've ever shipped something I'm genuinely proud of.
Going into this project, my goal was simple: build the best UX for a World Cup simulator. I think I did it.
Building this solo confirmed what I'd been suspecting: AI gives designers superpowers. The scope of what one person can own and ship has genuinely changed. I didn't compromise on the engineering, the data, the visuals, or the UX. I just built.
