I Built an App for the FIFA World Cup in One Night. Here's Exactly How.

A few months ago I had an idea. The FIFA World Cup 2026 is coming to Canada, Vancouver and Toronto specifically, and there was no good resource for international fans trying to figure out where to eat, what to do, or how to get around. Just generic travel blogs and outdated listicles.

So I built one. MatchGuide is a full PWA covering both cities with curated food guides, explore pages, match schedules, transit tips, and GetYourGuide bookings.

I built it in one night. Here's exactly how it happened.

The Research Phase Came First

Before I wrote a single line of code, I spent serious time in NotebookLM.

I uploaded local food blogs, Reddit threads about Vancouver and Toronto neighbourhoods, tourism content, transit guides, and neighbourhood breakdowns for both cities. Then I asked questions. What are the most interesting hidden gems in Vancouver? What's the food scene like near BMO Field? What do locals actually recommend?

This is the part that made the difference. The content in MatchGuide is not AI hallucinated. It's grounded in real local sources. The research phase took almost as long as the build itself. And it should have.

The prompt that ended up driving the build wasn't one sentence. It was a document. Research findings, feature requirements, UX decisions, data structure, what each page needed to contain. I went back and forth between Claude and ChatGPT to stress test the plan before touching code.

That's the part most people skip. They go straight to "build me an app." The plan is the work.

The Build: One Night

Once the plan was solid, the actual build was fast.

I fed the planning document to Claude. We went section by section: home page, city selection, food guide, explore, essentials, match schedule, transit, PWA install flow. Each section had to build and work before we moved to the next.

The stack ended up being Next.js, React, TypeScript, and Tailwind CSS 4. Fully static. No backend. No CMS. No database.

That last part is the interesting one.

Why I Didn't Use a CMS

When I first started thinking about content, I assumed I'd need Sanity or some headless CMS to manage restaurant listings, venue details, neighbourhood descriptions.

Then I realized: I don't need that.

All the content in MatchGuide is static. It lives in the codebase. When I want to update a restaurant listing or add a new hidden gem, I just tell Claude what to change and it edits the file. Done. No dashboard, no schema, no webhooks, no API calls.

With AI, updating static content is trivial. The overhead of a full CMS doesn't make sense for a project like this. The question used to be how do I make this easy to update. Now the answer is just ask your agent.

This is a genuine shift in how we should think about content infrastructure for smaller projects.

What MatchGuide Actually Covers

The app is built for international fans coming to Canada for the World Cup who don't know Vancouver or Toronto. The core question it answers: I have 72 hours in this city. What do I eat and do?

For Vancouver, that means a curated food guide with everything from budget eats to upscale, an explore page covering hidden gems, bike routes, beaches and hikes near the city, a full match schedule for BC Place, transit directions, and essentials like currency, weather, and safety tips.

For Toronto, same structure built around BMO Field and the downtown core.

Everything is hand curated. The restaurant picks have coordinates and Google Maps links. The explore section has GetYourGuide affiliate links for tours and experiences. The match schedule pulls real FIFA 2026 data.

What This Actually Took

Planning and research: a few evenings. The actual build: one night.

The build was fast because the plan was thorough. Every hour I spent in research and planning saved me three hours of confused back and forth with Claude during the build.

That ratio matters. AI assisted development doesn't mean you think less. It means the thinking happens earlier, and the execution is faster.

Try It

MatchGuide is live at matchguide.ca. It's a PWA so you can install it on your phone like a native app.

If you're coming to Vancouver or Toronto for the World Cup, or if you just want to see what a vibe coded travel app looks like under the hood, go explore it.

And if you're a developer thinking about building something for a specific event or use case, my take is simple: the research phase is the product. Spend the time there.