Team USA Hometown Hubs

Team USA Hometown Hubs is an interactive fan engagement platform that explores the geographic and data driven storytelling behind Team USA’s Olympic and Paralympic journey.

Comment

Inspiration

As sports fans and data enthusiasts, we've always wondered: what makes a specific region a breeding ground for athletic greatness? We were inspired by the incredible, diverse landscape of the United States and how local geography, culture, and facilities shape the journeys of Team USA athletes. For the Team USA x Google Cloud Hackathon, we wanted to look beyond the medal count. We set out to build an experience that tackles both the "Performance Parity" and "Hometown Success Engine" challenges, aiming to give fans a deeper, data driven connection to the athletes representing their hometowns on the world stage.

What it does

Team USA Hometown Hubs is an interactive fan engagement platform that visualizes the geographic roots of our Olympic and Paralympic athletes.

  • Interactive U.S. Heatmap: Users can explore an interactive, beautifully styled map of the United States to discover which regions are "Established Hubs" or "Emerging Hubs" for athletic talent.
  • Olympic & Paralympic Parity View: We engineered a side by side analytical dashboard that intentionally treats Olympic and Paralympic data with equal prominence, visualizing sport distribution and athlete counts without bias.
  • AI Powered Geographic Insights: When a user clicks on a state, the app leverages Google Gemma 3 to generate real time, non causal insights—explaining how local climates, topographies, or historic facilities might support participation in specific sports.
  • Road to LA28 Momentum & Leaderboards: The platform tracks which regions are building momentum for the Los Angeles 2028 Games and features a dynamic leaderboard ranking the most concentrated athletic hubs in the country.

How we built it

We prioritized a premium, immersive user experience with a modern tech stack:

  • Frontend Framework: Built on Next.js 16 (App Router) with React 19 and TypeScript for robust, server-rendered performance.
  • Design & UI: We designed a sleek dark mode interface with vibrant pastel accents and a "glassmorphism" aesthetic using pure Vanilla CSS to ensure maximum flexibility and smooth micro-animations.
  • Data Visualization: We utilized react-simple-maps (powered by D3) for the interactive U.S. heatmap and recharts for the parity dashboards.
  • AI Integration: We implemented a server-side API route that seamlessly connects to Google's Gemma 3 12B model (via OpenRouter) to generate contextual, engaging geographic insights on the fly.
  • Deployment: The application is containerized using Docker and architected to run seamlessly on Google Cloud Run and Vercel.

Challenges we ran into

  • Balancing Parity in UI/UX: Designing an interface that gave equal visual weight to both the Olympic and Paralympic teams required numerous iterations. We had to carefully structure our data models and dashboard layouts so that one team didn't overshadow the other.
  • Prompt Engineering for AI: Ensuring the AI generated insights that were geographically accurate, engaging, and explicitly non-causal (to avoid making false scientific claims about geography and athletic success) took significant prompt tuning. We had to guide the Gemma 3 model to use suggestive, careful language.
  • Complex Dependency Resolution: While preparing the app for modern deployment platforms, we faced tricky peerDependency conflicts between our cutting-edge React 19 environment and older mapping libraries, which required custom .npmrc configurations to resolve gracefully.

Accomplishments that we're proud of

  • Aesthetic Excellence: We are incredibly proud of the UI. Moving away from generic designs, we crafted a dynamic, living interface with hover effects, smooth gradients, and a cohesive pastel-on-dark color palette that feels genuinely premium.
  • Seamless AI Integration: Successfully wiring up the Gemma 3 model to provide instant, highly contextual geographic trivia adds a layer of magic to the map that static data simply can't provide.
  • True Parity Focus: We built a tool that doesn't just treat the Paralympics as an afterthought. Our parity view elevates both teams side-by-side, achieving the core goal of Challenge 1.

What we learned

  • We gained deep experience in prompt engineering for specialized, constraint-heavy LLM tasks.
  • We learned how to push the boundaries of Vanilla CSS to create complex visual effects like glassmorphism without relying on heavy styling frameworks.
  • We discovered fascinating insights into how specific regions in the U.S. naturally cater to distinct athletic disciplines.

What's next for Team USA Hometown Hubs

  • Live Roster Integration: Connecting our platform to a live Team USA athlete database API to automatically update hubs as new athletes qualify.
  • Fan "Check-in" Features: Allowing users to digitally "cheer" from their hometowns, adding a social layer that tracks fan momentum leading up to LA28.
  • Deeper AI Capabilities: Expanding our Gemma 3 integration to allow fans to chat interactively with an "AI Hometown Analyst" to ask specific questions about local Olympic history.

Built With

Share this project:

Updates