Olympick — Project Overview

An interactive web application that lets users explore US Olympic and Paralympic athletes on an interactive map and ask questions about them via an AI-powered chat assistant.

What it does

• Displays athlete hometowns as dots on a D3-rendered SVG map of the United States.
• Supports filtering by state, sport, season (Summer/Winter), game type (Olympian/Paralympian), and medal type.
• Provides a chat sidebar backed by an AI agent; the agent's responses drive map filters in real time — asking "Show me gold medalists from California" highlights the relevant athletes on the map.
• Voice input is supported via the browser's MediaRecorder API.
• Suggested follow-up questions are surfaced after each agent reply.

Components

Frontend

Next.js 16 app that renders the map and chat UI.

Tech stack:

• Next.js 16 / React 19 / TypeScript 5
• Tailwind CSS v4 (PostCSS)
• D3 v7 + TopoJSON for the SVG map
• react-markdown + DOMPurify for rendering agent replies
• @google/generative-ai SDK
• lucide-react icons
• Docker + Cloud Run (deployment)

Backend

Thin FastAPI service that sits between the frontend and the Vertex AI Agent Engine.

Tech stack:

• Python 3.14
• FastAPI + Uvicorn
• google-cloud-aiplatform[agent_engines,adk]
• Vertex AI Agent Engine (session management + streaming)
• Docker + Cloud Run (deployment)
• uv for dependency management

Agent

ADK agent deployed to Vertex AI Agent Engine (Reasoning Engine).

• Model: Gemini 2.5 Flash
• Tool: search_athletes — semantic vector search over ~171 athlete profiles
• RAG store: ChromaDB (persistent, local) with embeddings from text-embedding-004
• Output schema: Pydantic model with three fields:

Tech stack:

• Python 3.14
• google-adk (Agent Development Kit)
• google-cloud-aiplatform
• ChromaDB for vector storage
• uv for dependency management
• Docker (deployment to Vertex AI Agent Engine)

Built With

• adk
• agent
• docker
• flask
• gcs
• javascript
• next
• python
• rag