The 2026 World Cup starts on June 11. A few days ago I realized we had no prediction game set up among friends and family.
The obvious move was to use an existing app. There are a few out there. But I decided to build my own, using Claude Code as my main assistant. Not because it's easier, but because I wanted to experiment with the workflow of building something real with AI and document it here.
This is that document.
What a prediction game is, for those who don't know
A prediction game (or "prode" as we call it in Argentina) is a sports prediction competition. In the context of the World Cup: each participant predicts the result of every match. After each round, whoever got it right earns points. The person with the most points at the end wins.
The basic mechanic is simple. The complexity shows up when you start thinking through the details: how many points for getting the exact score versus just the winner? How do you handle draws? What about group stage vs. knockout rounds?
The stack
I went with what I know well:
- Next.js for the frontend
- Supabase for the database and auth
- Claude Code as the development assistant
The interesting part is how much of the work Claude Code handled directly. Not just suggestions or code completion — it wrote full database schemas, generated queries, built UI components, and caught bugs I wasn't seeing.
The prediction page
The main interface is where each user enters their predictions for each match. It needed to be fast to fill out — nobody wants to spend 20 minutes making predictions before each round.
Prediction page
The solution was to show all matches for a round on a single page, with quick result selection (1, X, 2) and the option to enter the exact score if you want more points.
The bracket/results tree
One of the most visual parts is the knockout bracket. As real results come in, the tree updates and shows how each user's predictions stack up against what actually happened.
Match bracket — how results unfold round by round
This was one of the more complex pieces to implement. The challenge isn't drawing the bracket — it's keeping state synchronized between the actual results and each user's predictions.
Private leagues
The main use case I had in mind was playing with friends and family. For that I needed private leagues: you create a league, share a link or code, others join.
Create a league and share it with friends
Each league has its own leaderboard. You can be in multiple leagues at the same time — useful if you want to play with friends and also with coworkers.
The scoring rules
A prediction game without clear rules ends in arguments. I defined the point system before writing a single line of code and made it visible inside the app.
Scoring rules visible inside the app
The system I went with:
- Predicting the winner (or draw in group stage): 1 point
- Predicting the exact score: 3 points
- Knockout rounds have multipliers
Simple, no surprises.
The leaderboard
The leaderboard shows the ranking within your league, with accumulated points, correct predictions, and exact scores. It updates automatically when new results are loaded.
Exporting results
You can export the results as an image — group stage, bracket, and the knockout tree from the round of 16 onward.
Full bracket export — groups, bracket, and knockout tree
Useful for sharing your prediction on WhatsApp or Instagram without having to screenshot each section separately.
Individual awards
On top of predicting match results, users can also vote for the tournament's individual awards: Golden Ball, Golden Boot, Golden Glove, and Best Young Player.
Vote for the individual award winners of the World Cup
Stats
Once the tournament is underway, you can see what percentage of users voted for each country to advance at every stage, all the way to champion. A quick way to gauge how unanimous — or divided — your league's predictions are.
Voting percentage per country at each stage, through to the champion
And for individual awards, a breakdown of how many users voted for each player.
Ranking of most-voted players per individual award
My champion
I predicted Argentina makes the final. I'm not saying against who or what the result is, because if I write it here and it doesn't happen I'll have to edit this post.
What I learned from the process
Claude Code is particularly good at repetitive code with clear structure. Supabase schemas, queries, scoring logic — it generated all of that well on the first try or with minimal corrections.
It's a bit less precise when context is ambiguous. When I explained "I want the bracket to update in real time," it generated something functional but not exactly what I had in mind. I had to be more specific: "when a result is loaded into the match_results table, I want the BracketView component to re-render with the new data without a full reload."
The back-and-forth is the actual workflow. It's not "describe what you want and Claude builds it." It's a cycle: generate something, test it, find what's missing or wrong, refine the prompt, repeat. More like pair programming than dictating code.
The game is live at prode-mundial-2026-xi-seven.vercel.app. Go in, create a league, and share it with your people.
More soon.