How My Son and I Built a World Cup Tracker From Scratch

The 2026 World Cup is in North America, spread across 16 host cities, 48 teams, and 104 fixtures. My teenage son is obsessed with football. I make things with AI for a living. So we did the obvious thing and built a tracker.

[IMAGE: Screenshot of the worldcupwatch.lol home page with countdown timer and today's matches]

The site is live at worldcupwatch.lol. It covers all 104 fixtures with live scores, group standings that auto-populate as matches finish, a knockout bracket, host cities with an interactive SVG map, full 26-player squad pages for every team, a predictions game, a sticker book, and a subscribable calendar feed of every fixture. UK-first throughout: all times in BST, BBC and ITV viewing badges on every match card. Built in Next.js 15, deployed on Vercel, custom domain acquired the week before kickoff.

This is the story of how we built it, what surprised us, and what it felt like to watch the opener on a site we had made ourselves.

The idea

My son had been asking when the World Cup was starting. I told him June, then pulled up a couple of the main fixtures sites to show him the schedule. They were fine. They were also a bit corporate, a bit slow, and not set up for a family watching from the UK with no interest in navigating a site designed for the American market.

That was the whole idea. Not a big plan, just: what if we built one that worked the way we wanted it to?

I have been using Claude as a coding assistant long enough that a project like this felt genuinely achievable in spare time. We started in May with a rough requirements doc and a blank Next.js project.

What my son contributed

He is not a developer. But he is a sharp tester and he cares about the product in a way that keeps you honest.

[IMAGE: Father and son working together at a desk, reviewing the site]

He caught things I had completely missed. The UK times were not prominent enough. The sticker book needed more team crests visible at a glance. The mascot was too small (twice, actually: he flagged it, I made it bigger, he flagged it again). He wanted goal-celebration confetti on the match pages when a goal went in. He wanted a way to follow his team and see their results at the top of the page without searching. Every one of those is now in the site, and the confetti is genuinely excellent.

The predictions game was his idea entirely: pick your group winners, your finalists, your champion and golden boot. Per-device, no accounts, no server-side storage. It just works, and the family has been arguing about selections ever since.

What we built across six sessions

The build ran across six sessions from May into the tournament kickoff on 11 June. Each one had a clear goal and a defined scope.

Early sessions laid the foundations: fixture data from Football-Data.org, the groups page and knockout bracket, individual team and match pages. Then a full mobile pass, SEO and structured data, and a custom domain.

[IMAGE: Screenshot of the fixtures page showing filtering by stage, group, team, and broadcaster]

The host cities page was one of the more satisfying builds. North America has 16 host cities across three countries. We drew a custom SVG map, placed city markers, and wired up Wikipedia popup cards so you can get a sense of each location without leaving the page.

Squad pages were built by parsing Wikipedia's raw wikitext for the '2026 FIFA World Cup squads' article deterministically: 48 teams, 1,246 players, all properly formatted and linked. Parsing a wikitext article to build 48 squad pages sounds dry, but it is actually a satisfying problem and the results are clean.

[IMAGE: Screenshot of a team squad page showing the full 26-player list]

The calendar integration came late in the build and ended up being one of the features we are most pleased with. Every fixture has a one-click add to Google Calendar, Apple Calendar, or .ics download. There is also a subscribable feed of all 104 matches, so you can subscribe once and your calendar updates automatically if the schedule shifts.

The night it went live with real scores

The live score integration was the part I had been putting off. The site had synthetic scores right up until the morning of 11 June, the day Mexico faced South Africa at the Estadio Azteca in Mexico City.

[IMAGE: The site showing live scores during Mexico v South Africa, the tournament opener]

Switching to real Football-Data.org scores took one session: rate-limit-aware fetching, 30-second revalidation on each match endpoint, graceful fallback to synthetic state if the API is unreachable. We checked the endpoint about 12 hours before kickoff and it returned the correct pre-match status. Then we sat down and watched the opener together with the site pulling in real data.

That was the moment. Not the launch, not the first commit. The moment my son said 'it's actually showing the score' and we watched it tick up in real time.

On building with AI

Practically all of the code was written with Claude as a coding assistant, using Claude Code specifically. This is a Futureformed project so that is not surprising, but it is worth being direct about: this site would not exist in this form without it. A Next.js 15 app with 104 fixtures, live scores, 48 squad pages, an SVG map, a calendar feed, and a predictions game is not a weekend project done by hand.

What AI compressed was the time between the idea and the working thing. What it cannot do is have the idea, care about the product, know that the mascot needs to be bigger, or sit on a sofa at 20:00 on a Tuesday watching Mexico kick off a World Cup.

That part was us.

[IMAGE: Screenshot of the predictions game or sticker book page]

If you are curious about what becomes possible when you build with AI seriously, rather than just prompting into a chat box, that is what we do at Futureformed. Have a look at our work or drop us a line.