Fan Meaning Map

Discover what kind of Team USA fan you are. Gemini decodes 4 quick answers into your fan archetype, your athlete matches, and the surprising reasons others see sport differently.

Comment

Inspiration

Sports fandom is treated like a monolith: you're a "fan" or you're not. But anyone who's watched a race with friends knows that's wrong. One person sees a millisecond shaved off a record. Another sees a hometown kid finally getting their moment. A third sees a comeback story that has nothing to do with the clock. Same moment. Completely different meanings.

We wanted to build something that surfaces that hidden layer — not "who's your favorite athlete" but why you connect the way you do — and then use it to introduce fans to Team USA athletes (Olympic and Paralympic) they'd never have searched for on their own. Discovery based on meaning, not popularity.

What it does

Fan Meaning Map is an interactive fan identity experience powered by Google Gemini.

  1. The Quiz — Four fast, gut-reaction questions: pick the moment that gives you chills, your fan superpower, three traits that hit different, and a final gut check. No overthinking, just reacting.
  2. Pattern Decode — Gemini visibly reasons through your answers, drawing lines between them to show how a pattern forms. You watch your fan identity assemble itself.
  3. Your Fan Identity — A named archetype like "The Photo Finish Junkie," with a tagline, a rarity percentile, three sub-traits ("Millisecond Hunter," "Upset Oracle," "Tape Junkie"), an insight tension ("Most fans see a fast race — you see the millisecond where speed becomes a record"), and a shareable card.
  4. Your Athlete Matches — Three Team USA archetypes that align with how you see sport, always including at least one Olympic and one Paralympic match. The third is framed as "the one you didn't see coming" — discovery through meaning, not search.
  5. Explore Archetypes — A grid of 32 anonymized Team USA athletes (16 Olympic + 16 Paralympic) with vivid nicknames like "The Phoenix Street Prodigy" and "The Dallas Speedster." Each opens into a deep view: what you'd share with them, what they'd teach you, the fan community you'd join, and the core tension in how their fans see them.
  6. The Fanbase Split — For every athlete, a breakdown of how different groups connect — the technical purists, the hometown loyalists, the algorithm acolytes — with estimated sizes, obsessions, and where each tribe is loudest online.
  7. Hot Takes & Fan Clash — Provocative AI-generated debate prompts pairing two athletes, with vote splits and a Gemini-generated reaction explaining why the split exists. Quick Clash pits Olympic vs. Paralympic athletes head-to-head with a personalized commentary based on your fan identity.

The whole experience is built on one idea: everyone's watching, but not the same thing.

How we built it

Frontend: A single-page vanilla HTML/CSS/JS app — no build step, no framework overhead. A dark-themed UI with Olympic gold (#FFD700), Paralympic teal (#00D4AA), and purple/coral accents reserved for identity and competition moments. Smooth fadeUp transitions, a DNA-style spinner, and a streamed typewriter effect for AI reasoning.

Backend: Node.js + Express, Docker-ready, deployed on Google Cloud Run.

AI — Gemini at three layers:

  • gemini-3-flash-preview for structured generation: fan identity classification from quiz answers, hot take prompts, athlete fan profiles, comparative analyses, clash matchups.
  • gemini-3.1-flash-lite-preview for fast plain-text streaming: pattern decode reasoning, hot take reactions, clash commentary.
  • gemini-3.1-flash-image-preview for dynamic image generation: fan identity cards, clash graphics, shareable cards.

Streaming: Server-Sent Events (SSE) deliver the typewriter feel for fan interpretations, decode reasoning, comparative analyses, dynamic matchups, and clash commentary. Latency becomes the experience — you watch Gemini think.

Data: A curated dataset of 32 anonymized Team USA athlete profiles (16 Olympic + 16 Paralympic across 24 sports), each given a regional nickname (e.g., "The Dallas Speedster," "The Portland Trailblazer") and tied to a sport, hometown, and career stage. No PII, no specific named athletes — every archetype is a composite expressed through publicly known characteristics.

Caching: Hot takes cached for 10 minutes server-side; fan interpretations cached client-side to avoid redundant API calls and keep the experience snappy.

Challenges we ran into

  • Olympic / Paralympic parity at the structural level. It's easy to say you're treating them equally and accidentally bury Paralympic athletes one scroll below Olympic ones. We forced parity into the data layer (16/16 split), the visual system (gold and teal as equally weighted accent colors), and the matching algorithm (every result set guarantees at least one Olympic and one Paralympic match).
  • Avoiding the trap of generic horoscope output. Early Gemini prompts produced fan archetypes that felt like personality quiz filler. We rewrote prompts to force a specific insight tension ("Most fans see X, you see Y") and ground every claim in the user's actual answers — so the result feels earned, not assigned.
  • Streaming UX without flicker. SSE is great until your typewriter stutters. We tuned chunk sizes and added smooth-out logic on the client so partial JSON for fan interpretations doesn't render as broken UI.
  • Conditional language discipline. The hackathon rules require phrases like "could lead to" and prohibit guarantees about results. We wrote a prompt-level style guide and audited every generated output to make sure no archetype implied causation between geography or biometrics and athletic outcomes.
  • NIL and content restrictions. All athletes are anonymized into archetype nicknames. Every visual in the demo is generated or abstract. No real athlete names, faces, or quotes appear anywhere in the product.

Accomplishments that we're proud of

  • A fan identity result that actually surprises people. Watching a tester get matched to a Paralympic track athlete they'd never have searched for — and immediately understand why — was the moment we knew the concept worked.
  • True Olympic/Paralympic parity baked into the architecture, not bolted on. Equal counts, equal visual weight, equal narrative depth in every fan profile, every clash, every match.
  • The Pattern Decode moment. Showing Gemini's reasoning — connecting your four answers into one identity in real time — turned a black-box classification into a "wow" moment.
  • Three Gemini models orchestrated for three different jobs. Structured JSON, streamed text, and image generation working together in a single coherent experience.
  • Zero build step, fully deployable in Docker, end-to-end SSE streaming. A lean, demo-ready stack that runs on a free Cloud Run tier.

What we learned

  • Meaning is a better discovery signal than popularity. Recommending athletes by "what you value in sport" produced wildly more interesting matches than any genre-based or sport-based recommender we sketched.
  • Streamed reasoning > finished answer. Watching Gemini decode a pattern is more compelling than seeing the final result instantly. Latency, framed correctly, is a feature.
  • Constraint sharpens prompts. Forcing every archetype to include an "insight tension" and conditional language not only met the rules — it made the outputs better.
  • Fan-first framing keeps Paralympic content from being treated as an afterthought. When the question is "how do you connect with sport," disability isn't a sidebar — it's part of the same conversation about excellence, margins, and meaning.

What's next for Fan Meaning Map

  • Live event mode. Pipe in a real Team USA event and let fans see how their archetype responds in real time — "Photo Finish Junkies, this is your race."
  • Friend group fan map. Multiple people take the quiz, and the app shows the collective meaning map of a friend group, family, or watch party — where you align, where you clash.
  • Gemini-generated post-event recaps. Same event, four different recaps written for four different fan identities. Same race, four different stories.
  • Expanded archetype coverage. Scale the 32-archetype dataset toward full Team USA representation across all LA28 sports, with deeper regional and developmental-stage diversity.
  • Accessibility-first redesign pass. Captions, screen-reader narration of the streamed decode, full keyboard navigation — the Paralympic ethos applied to the product itself.

Built With

Share this project:

Updates