Home Crowd - Vancouver Hackathon - Hasan & Jajwinder

Inspiration

Vancouver is hosting FIFA World Cup 2026 matches, and we kept thinking about the fans who'll come here and end up watching alone. The energy isn't only inside BC Place — it's on Commercial Drive, in Lonsdale's cafés, at community centres and restaurants all over the city. But there's no real guide to where different communities actually gather to watch. FIFA's own 2026 tagline is "Your City. Your Colors," and that's basically what we wanted to build — not a ticketing app or a schedule tracker, but a map of the city as it comes alive around the tournament.

What it does

Home Crowd lets you pick any nation — even one that isn't your own — and see a Vancouver neighbourhood where that community tends to gather to watch, eat, and celebrate. No ticket and no team loyalty required.

9 nations mapped: Brazil, Portugal, Croatia, Mexico, Iran, South Korea, England, Germany, Canada
Soft heat zones that show where energy tends to concentrate — a glow, not a single pin
3D buildings and a tilted bird's-eye camera so you can get your bearings before you go
A time toggle — "now," "tonight," "match day" — to see how the energy shifts
An info panel for each area: suggested venues, what to eat, what to see, how to get there, and a transit note
Match-day transit guidance we checked by hand (Main St–Science World is the reliable route; the Stadium-Chinatown lower entrance closes on match days)
A "Show the world" view that zooms out so you can see every community at once
A "You are here" marker and one-tap directions that start from your real location

How we built it

We ended up with two versions in one day:

Main build (in Claude Design): MapLibre GL JS 4.7.1 (free, no token) · CARTO dark-matter tiles · React on Claude's Design Component runtime · Geist typeface · flag SVGs from flagcdn.com · Google Maps deep-links for directions. This is the Netlify link below.
Earlier engine (with Devin): a 3D map on Mapbox GL JS 3 · Next.js 16 · React 19 · Framer Motion, deployed on Vercel. Devin scaffolded and deployed this early, driven from a terminal, while we focused on direction and design.

For the look, we set our colours up front — a teal, a gold, a green, and a dark ink — drawn from Vancouver's FIFA 2026 host-city palette rather than picking shades at random. On the content side, we did a round of research and double-checked things before trusting them, which caught a few common claims that turned out to be wrong.

Hasan handled the design system, research, data, and docs; Jajwinder handled the app build with Devin and Claude Code. We went from a flat first prototype to a full heat-zone, animated, panel-driven app in a day.

Challenges we ran into

Switching map engines. Our first engine used Mapbox. We moved the main build to MapLibre + CARTO to drop the API-token requirement entirely — we lost terrain, but deployment got a lot simpler.
Limited data. There's no tidy public dataset for where a given community watches football in Vancouver, so we worked from neighbourhood knowledge and venue research and tried to be honest about what's an estimate versus something we confirmed.
Checking our facts. A couple of plausible transit details turned out to be wrong, so we made a habit of verifying before adding anything to the app.

Accomplishments that we're proud of

A working, polished app shipped in a single day
A look that's grounded in the real FIFA/Vancouver identity rather than a generic theme
Transit guidance we actually checked, with the shaky claims removed
A spec and data setup clean enough that someone else could pick it up and extend it

What we learned

The useful thing isn't "where is BC Place" — people can find that. It's "where does my crowd go," and almost nobody answers it. Building for that specific question, with real neighbourhoods and venues, is what made the app feel useful instead of decorative. We also learned to settle the design basics — colours, type, spacing — before writing much code, which saved time on everything after.

What's next for Home Crowd

Swap the current reference photos for live, on-the-ground neighbourhood photos (the slots are already built in)
Add a food layer with home-country restaurants and links
Bring live match scores into the time toggle
Map more nations toward the full tournament
After the tournament, turn it into a lasting cultural directory for each community

Links

https://vancouverhackathon.netlify.app/

Built With

carto-dark-matter-tiles
claude-ai-(claude-code-+-claude-design-canvas)
devin
flagcdn.com
geist-typeface
google-maps
html/css
javascript
maplibre-gl-js
react

Submitted to

Vancouver Made

Created by

Hasan Sufi — Design Systems & Research Lead · Front-of-House / Pitch

I owned the design system, the research backbone, and the live deployment, and I led how Home Crowd gets told — the pitch and the room.

Specifically, I:

Built the design system — locked the palette, type, and layout from Vancouver's real FIFA 2026 host-city identity, so every component was grounded in the actual brand, not a generic theme.
Ran the research and data — assembled the nine communities, neighbourhoods, venues, and match-day transit, and kept a verify-before-trust rule that caught the false claims before they shipped.
Wrote the spec and data docs — the executable brief and process log the build ran on, clean enough for another engineer to extend cold.
Drove the second build in Claude Design — the MapLibre + CARTO version, deployed live to Netlify.
Led the pitch — the live demo narrative, the rubric story, and the front-of-house energy that carries it in the room.

Hasan Sufi
Jaj — Creative & Product Lead · Art Director · Designer

I conceived, art-directed, and product-led Home Crowd end to end — owning the idea, the research, the narrative, and every design decision, while orchestrating an AI engineer (Devin) to build the technical engine.

Specifically, I:

Framed the problem — reframed a generic host-city guide into a point of view: Vancouver already contains the World Cup — and set the emotional core, "Your people are 15 minutes away."
Directed the research and insisted on verifying it (which caught the Italy-didn't-qualify and false-transit errors).
Set the entire visual language — the dark neon energy map, bird's-eye 3D, heatmap colour system, typography, panels.
Made the defining product call — a curated experience, not a Google-Maps tool — and art-directed dozens of iterations on clarity and craft.
Designed the UX — the newcomer's path and each neighbourhood card's structure.
Named and branded it Home Crowd, and built the pitch narrative.
Orchestrated the AI build — directing Devin to scaffold, build, and deploy, and making every keep/cut/refine call.
One-liner for credits: Jaj — concept, research, art direction, product & UX design, brand, and creative direction of the AI build.

Jajwinder Lubana

Updates

Hasan Sufi started this project — Jun 20, 2026 07:48 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.