Side Quest · Live
Turning World Cup fandom into a live map of India
Fanpire · FIFA World Cup 2026 Fan Vote Territory Map
Key Outcomes
400+
Votes Cast
759+
Districts Mapped
3
Team Size
4
Features from Feedback
A World Cup fan app with one-tap voting and a live 3D district map. It launched a day before the tournament, passed 400 votes and grew through feedback the team collected from real fans.
Screens
First release
Live version
Brand Colors
Ink
#15082B
Violet
#7B3FE4
Gold
#F2B33D
Cream
#F7EFE0
Pitch
#0A1628
Headings & UI
Bricolage Grotesque
Taglines & Italic Accents
Fraunces
Fanpire started as a World Cup idea between three friends and became a live product. I led it: product direction, design and the decisions on what to build. My two teammates gathered feedback from fans, pressure-tested ideas and shaped the design direction with me, and I turned what we learned into each new version. AI wrote the code; I directed it.
Concept
The Idea
The idea came from brainstorming with two close friends: what if fans could claim territory for their team? Vote in your district, and the map takes on your team's colour wherever it's winning. The rivalry is the product.
The core is one tap to vote and a live map that shows the result. Everything else, from fraud checks to daily streaks, exists to make that moment work and bring people back.
“One tap to vote. A live map shows who's winning. The rivalry is the product.”
Map
The 3D Map
The map is the hero. Instead of building a map from scratch, we used an open-source map renderer with free dark basemap tiles and designed our own layer on top: district boundaries for all of India, raised in 3D and coloured by the leading team.
3D districts
Each district's height and colour show the leading team's votes, so the map reads like a landscape of fan dominance.
Glowing borders
District borders glow against the dark basemap, and claimed districts take on the leading team's colour.
Rally alerts
When a rival takes over a state, fans get a 'state under threat' alert asking them to rally support.
Cinematic mode
Slow auto-rotation and a 2D/3D toggle turn the map into a centrepiece, not just a tool.
Design
Design & Design System
We set the look together as a team: a dark, stadium-at-night feel that lets the glowing map stand out. I turned that direction into a design system, with colours, type and components defined once as tokens instead of hard-coded on each screen, so the app stayed consistent as it grew.
Dark-first
A deep ink background sets the stage and keeps the map's colours vivid.
Tokens, not hard-coding
Every colour, size and component comes from the design system, so a change in one place updates the whole app.
Mobile-first PWA
Designed for phones first and installable like an app, then scaled up to desktop.
Gamification
Reasons to Come Back
Beyond voting, a light game layer gives fans a reason to return every day.
6
Rank Tiers
60
Avatars
50
XP per Invite
7
Streak Days
Six ranks
Fans earn XP for voting, checking in, predicting and sharing, and climb from Rookie to Emperor.
60 character avatars
Illustrated animal characters with generated usernames give fans an identity without needing a real name.
Match predictions
Fans predict results, scores and first scorers, and earn points for getting it right.
Streaks and invites
Daily check-in streaks and bonus XP for inviting friends, so returning and sharing both pay off.
User Feedback
Shaped by Real Users
My two teammates gathered feedback from fans throughout, and we went through it together. I turned what we learned into each next version, so every feature after launch answered something real fans asked for.
“Every feature after launch came from what fans asked for, not from assumptions.”
400+
Votes Cast
Started as vote and go
The first version was deliberately simple: tap a team, cast a vote, see the map change. No sign-up, no friction, just a test of the core idea.
Location, automatically
Picking a state, then a district, then a team was too many steps. For fans in India, GPS fills in the state and district, so voting is just picking a team.
Who's winning overall?
Fans saw their district but wanted the national picture, which led to team rankings across the country and by district.
Live matches and predictions
Fans wanted the app to feel alive during games, so we added live scores and player stats, which made predictions possible.
AI Process
How I Worked with AI
I don't write code. My job was to be the brain of the project: research the options with AI, decide what to build and what not to, and set clear rules for how it should be built. AI wrote the code within those rules.
“AI wrote the code. I decided what it should be, and what it shouldn't.”
- 01Wrote the product spec and a pressure-test document before anything was built.
- 02Researched approaches with AI before deciding, from hosting and sign-in to how the map loads fast.
- 03Chose the stack with AI after comparing options: Next.js for the app, Supabase for data, MapLibre for the 3D map and Cloudflare to keep it fast and cheap.
- 04Kept the core unblocked: anonymous voting first, accounts only for the extras.
- 05Set up a design system, so screens use shared tokens and components and nothing is hard-coded.
- 06Reviewed each change against the spec, and cut what didn't serve fans.
Outcomes
What It Showed
Fanpire launched one day before the World Cup kicked off, later than planned, and some features were still being finished during the knockout rounds. That meant it missed the early weeks when an audience builds naturally. It still passed 400 votes, with fans coming back, keeping streaks and turning the map into team colours.
Momentum despite a late launch
Real traction arrived even without the ideal timing, which suggested the idea itself resonated.
Decisions mattered more than code
The hard part was deciding what to build, how fans would use it and what to cut.
A spec kept it shippable
A clear spec and pressure-test document guided every decision and kept the project focused.
Feedback made it better
The team's feedback loop, not a fixed roadmap, decided what came next.
Next
Where Fans Wanted It to Go
The same feedback loop shaped what came after the first release. Fans asked for more ways to play, and for Fanpire to keep going after the tournament. Part of that shipped in the live version; the rest was designed as the next step.
Fan Zones (shipped)
A fan leaderboard and a Territory Wars feed, so supporters compete together and see districts change hands.
Rebuilt navigation (shipped)
Matches and Fan Zone moved into the main tabs, so playing sits right next to voting.
Arena (designed)
A dedicated space for prediction contests, with groups and leaderboards to play with friends.
More sports (designed)
Support beyond football, so the rivalry carries on across seasons and tournaments.