Common Ground

Common Ground turns Team USA data into collectible state cards, where fans can explore hometown hubs, uncover regional insights, and complete mini games inspired by each state’s athletic strengths.

Comment 1

Inspiration

Sports fandom often starts with a personal connection: where someone grew up, where they live now, or which places feel familiar. We wanted to make that connection explorable without turning individual athletes into data points. Common Ground focuses on aggregate public roster signals by state, then layers in geography and climate context so fans can discover patterns safely, visually, and playfully.

The idea was to make a fan experience that feels like opening a collectible state card, not reading a spreadsheet. Each card gives fans a state-level view across Olympic and Paralympic programs, then invites them into a low-stakes challenge that helps the sport trait feel more tangible.

What It Does

Common Ground is a React/Vite web app where fans can:

  • Explore an interactive U.S. state atlas built from real state boundaries.
  • Switch between Paris 2024, Milano Cortina 2026, or both datasets together.
  • Open 50 U.S. state insight cards built from aggregate public TeamUSA.com roster data.
  • View Olympic and Paralympic sport panels together on one shared state card.
  • Read top city-level hometown areas and sport-family signals where aggregate counts support them.
  • Generate Gemini-powered state briefings and sport-card context from aggregate roster, sport, and geography inputs.
  • Play one of five short fan challenges: Focus Window, Rhythm Shift, Precision Trace, Open Space, and Pattern Scout.
  • Save discovered cards and private challenge score history when signed in with Firebase Auth.
  • Explore without an account; login is only needed for synced collection and private score history.

How We Built It

The frontend is a React 19 and Vite single-page app with D3, topojson-client, and us-atlas powering the state map. UX/UI design and frontend implementation focused on creating the end-to-end experience in Figma and React, including the landing page, interactive map, collectible card interactions, and challenge flows. The map is the main discovery surface: selecting a state opens a card-style modal with generated artwork, aggregate roster signals, Olympic and Paralympic sport panels, source context, and a Gemini-powered state briefing.

The backend is a lightweight Node server that serves the built app, exposes API routes, validates Gemini responses, manages Firebase sessions, and keeps Gemini calls server-side. The same server runs locally with npm run api and in Cloud Run with npm start.

The data pipeline imports public TeamUSA.com roster sources for Olympic Games Paris 2024, Paralympic Games Paris 2024, Olympic Winter Games Milano Cortina 2026, and Paralympic Winter Games Milano Cortina 2026. The ingest script deduplicates records, filters to retained U.S. hometown geography abbreviations, removes individual-level fields, and writes aggregate state-card data to public/data/state-cards.json.

Gemini API Integration

We leveraged Gemini across multiple dimensions—multimodality, reasoning, and context—to drive the application's intelligence:

  • Narrative & Context (Gemini 3.1 Pro): We pass aggregate roster data alongside public geographical and climate context into Gemini 3.1 Pro. The model uses its advanced reasoning capabilities to write compelling back-of-card context and state briefings. It uncovers geographical "hubs," weaving together climate data and roster counts to highlight how a state's unique landscape might naturally shape its sports culture.
  • Mini Game Reflection (Gemini 3.1 Flash Lite): Handles rapid, post-challenge reflections and interactions to keep the user engaged with low latency.
  • Multimodal Generation (Gemini 3 Pro Image Generation): Generates highly stylized Olympic and Paralympic card-panel artwork tailored to the specific sport and state context. The art is unique to each state, but remains consistent across all user accounts to create a shared, verifiable collectible experience.

Google Cloud / Firebase / Gemini Architecture

  • Vertex AI Gemini 3.1 Pro powers server-side state briefings and back-of-card information panels.
  • Vertex AI Gemini 3.1 Flash Lite handles low-latency post-challenge evaluations.
  • Vertex AI Gemini 3 Pro (Imagen) creates unique state-card panel artwork.
  • Cloud Run hosts the Node backend and serves the React frontend, providing a scalable and reliable production environment.
  • Firebase Auth handles email/password and Google sign-in.
  • Firebase Admin verifies ID tokens and creates HTTP-only session cookies.
  • Cloud Firestore stores user profiles, saved card collections, private score history, and generated panel metadata.
  • Firebase Storage securely stores the Gemini-generated card panel PNGs.

Data, Privacy, And Compliance

Common Ground intentionally uses aggregate public roster data rather than athlete-level profiles. The frontend dataset strips athlete names, images, profile URLs, biographies, medals, rankings, finish times, and other individual-level fields before card data is written.

The experience avoids Olympic rings, Paralympic Agitos, Team USA logos, LA28 logos, NGB logos, medals, athlete likenesses, rankings, and causal claims that geography produces athletic success. Olympic and Paralympic signals are presented together in one shared state card rather than as a separate Paralympic toggle.

Challenge results are personal fan results only. Signed-in users can save private score history, but the app does not rank people against athletes or public leaderboards.

Accessibility

Accessibility was a core focus throughout development. Google Lighthouse was used continuously to audit the application and guide iterations until Accessibility and Best Practices scores reached 100, while maintaining strong performance. Interactive elements were designed to be fully keyboard navigable, and semantic HTML, descriptive labels, and screen-reader-friendly content were used to ensure the experience was accessible to a wide range of users.

Challenges We Ran Into

The hardest part was balancing excitement with restraint. A fan map wants to feel vivid and collectible, but the data has to stay aggregate, contextual, and careful. We designed the Gemini prompts and validation rules around that tension so the generated briefings stay useful, fan-friendly, and grounded in the state-level inputs.

From a UX perspective, another challenge was designing for sports fans, as one team member (Kyle) brought a stronger understanding of sports culture while the other (Thashin) approached the experience from a more general user perspective. This occasionally led to different opinions on terminology, card layouts, and user flows, but those contrasting viewpoints ultimately helped shape an experience that feels intuitive not only for dedicated fans but also for casual users exploring Team USA for the first time.

Another challenge was making the same card work across multiple data scopes. Paris 2024, Milano Cortina 2026, and the combined view can surface different sport signals, art, and copy, so the app needed scoped data merging without breaking the card interaction.

Firebase and Vertex also needed careful separation. Local generation may use a Firebase service-account JSON for Firestore and Storage while Vertex uses gcloud auth or Cloud Run service identity. The .env setup and deploy script are designed around that split.

Accomplishments

  • Built a complete state discovery loop: map, state card, featured sports, briefing, challenge, collection, and settings.
  • Designed a collectible sports-card-inspired experience that transforms aggregate athlete data into an engaging fan journey.
  • Achieved full Olympic and Paralympic parity in UI representation.
  • Kept the app fully explorable without login while still supporting synced progress for signed-in users.
  • Created a privacy-conscious data pipeline that strips individual-level athlete details before frontend use.
  • Added five different fan challenges connected to generated sport-trait assignments.
  • Deployed architecture is Cloud Run-ready with Firebase Auth, Firestore, Storage, and Vertex AI Gemini.
  • Built an automated deployment script that provisions required Google Cloud services, configures IAM, builds the container, and deploys to Cloud Run.

What We Learned

We learned that GenAI (Gemini in our app's case) works best here as a context translator, not as the source of truth. The source data stays structured and aggregate; Gemini turns those signals into fan-readable briefings, sport connections, info panels, card art, and reflections.

We also learned that compliance and product design can reinforce each other. The same constraints that prevent athlete-level exposure pushed the experience toward state cards, aggregate sport lenses, and personal challenges, which made the app feel more unique.

What's Next

  • Add more generated panel coverage across all 50 states.
  • Add more accessibility QA across small screens and motion-reduced settings.
  • Expand admin tooling for regenerating panel art/copy and reviewing Gemini outputs.
  • Optimize Performance: Implement efficient cache lifetimes and optimize image delivery to improve our Largest Contentful Paint (LCP) and bring our Lighthouse performance score (77) up to match our high Accessibility (100), Best Practices (100), and SEO (93) scores.

Built With

Share this project:

Updates