Building FullStack’s interactive FIFA 2026 Transit Map app in Claude Fable 5

UPDATE as of 6/17/2026: At this time, Claude Fable 5 is still offline. Follow our blog on all things Fable 5 for the latest updates.

The 2026 FIFA World Cup features a record-breaking 48 teams across twelve groups, playing in 16 different host cities and four time zones. Needless to say, making sense of the official PDF featuring all 104 matches posed some challenges.

During a recent match, we thought, “There’s got to be a better way to do this.” We tried to find a good transit map showing different team paths and couldn’t find one.

So we opened up Fable 5 and did it ourselves in just under an hour.

Try out the FullStack FIFA 2026 Transit Map now.

Brainstorming and designing concepts in Fable 5

First, we dropped the map into Claude Fable 5 and asked it to really understand the schedule. Then, we asked it to think like a UX designer and pitch three out-of-the-box ways to browse it. 

Fable 5 came back with three ideas: 

• A subway-style Transit Map
• A "Destiny Engine" that plays out your team's fate
• A "Road Trip Machine" for planning which games you could actually attend. 

We picked the Transit Map, and that choice set the tone for everything after.

Building the FullStack FIFA Transit Map app in Fable 5

The first build laid down the foundation: all 12 groups as colored lines, each match as a station, the whole thing flowing left to right from June into the July final in New York. Then came a run of small, sharp design notes that made it feel handmade. We noticed overlapping stations were stacking on top of each other, so Fable 5 spread them side by side within each day. 

Then, we wanted the stations that connected non-adjacent teams to look different, and after a back and forth (including someone on our side sketching a shape on paper and photographing it), we landed on little "peanut" shapes that pinch in the middle. We asked which two matches Fable 5 had been unsure about, and that one question kicked off a full verification pass where Fable 5 cross-checked every date and venue against news sources and quietly fixed about twenty of them.

Choosing and adding features to our FullStack FIFA Transit Map

From there, the app grew feature by feature. First, we added a way to click any city and see everything happening there. Then we added a cleaner arrow system for scrolling instead of a clunky scrollbar, with the arrows gently pulsing to show which way you could go. 

The next feature was what we expected to be the most complex: wiring in live scores so the map could update itself as real results came in. That opened a whole thread of practical decisions. We started with one data source, hit a wall when the browser blocked it, switched to football-data.org with our own API key, and tuned the timing so the app only checks for results around when matches actually end, staying polite to a free service. This large, complex feature took Fable 5 roughly fifteen minutes.

Along the way, we kept trimming: We cut the live-match polling because this was meant for planning, not second-screen watching. We killed the simulate and key buttons once they were redundant. We pulled the debug text out of the public view. Each cut made it lighter and more focused, which is usually the hardest discipline in building anything.

Our FIFA 2026 win prediction feature

Once we had built the app we wanted but couldn’t find, we wanted to take it to the next step: Could Claude Fable 5 build an app to predict World Cup outcomes? 

We decided to add a win predictor built on every team's recent form and head-to-head odds. Claude pushed back a little here, as the literal version would mean scraping hundreds of matches for a weaker result. Instead, it suggested an Elo rating system, which can bake in recent form automatically and simulate the entire tournament thousands of times in under a second. 

We said go, and now every match card shows live odds, the final shows its likely finalists, and there's a power-ranking table sourced from the World Football Elo system.

Making our Fable 5 build work on mobile

The last big chapter was mobile. We wanted phones to feel native, not squished, so Claude rebuilt the phone experience as a swipeable day view where you see today's games and swipe to other days. 

Groups collapsed into tappable dots, stations grouped under USA, Canada, and Mexico flags. And then there was the stubborn little "lip" on the bottom card that would not go away. It took a few rounds, and we stayed patient with it, until Fable 5 finally found the real cause buried in a CSS detail and made the card disappear cleanly into a floating icon.

Finishing touches on the transit app

Through all of it there was packaging and re-packaging for a standalone file, for Cloudflare and to integrate with our Webflow-hosted site, plus a favicon, social share cards, and finally the credit line landing on "Built by FullStack, Built with Claude."

What started as a static poster ended up as a living thing: a transit map that knows the schedule cold, updates itself when goals go in, predicts who lifts the trophy, and fits in your pocket. Not bad for something that began with "here is a PDF, go."

We added the transit map to our site for clients, our team, and any FIFA fans looking for a faster, at-a-glance way to browse the tournament. Bookmark it now to keep track of your favorite teams all tournament!