Winter Olympics 2026 Medal Tracker

A beautiful, premium Next.js dashboard displaying the real-time medal tally for all countries participating in the 2026 Winter Olympics in Milano Cortina.

Antigravity Experiment

This application was entirely generated by the Antigravity Code Editor by Google using the Gemini 3.1 Pro model.

Initial Prompt:

"I want to building an app to track the latest medal tally for all the countries in the Winter Plympics for 2026"

Live Application

🟢 This application is currently deployed on Firebase App Hosting. You can view the live production build here: 👉 https://winterolympics26--winterolympics26-428ab.us-east4.hosted.app/

Deployment Note: Firebase App Hosting was chosen as the production environment for this experiment. Because it is optimized to connect with a Git repository out-of-the-box (rather than deploying directly via CLI), the code was first pushed to GitHub. Firebase App Hosting was then connected to the GitHub repository to automatically detect, build, and re-deploy changes on every push.

Implementation Details

The core functionality of this application is driven by a unique data-fetching architecture since free, live JSON APIs for Olympic data require paid subscriptions:

1. Next.js API Scraper (/api/medals): A dedicated backend endpoint is built directly into Next.js. It fetches live HTML data (e.g., from public sources like Wikipedia), parses the medal table using cheerio, and structures it into clean JSON format.
2. Fallback Mechanism: The API includes a hardcoded fallback mapping to ensure the UI is fully functional and populated even if the source data structure temporarily changes.
3. Frontend Dashboard (page.tsx): Polling the API every minute to ensure real-time updates.

Technology Stack

• Framework: Next.js 16.1.6 (App Router)
• Styling: Vanilla CSS for Glassmorphism effects + Tailwind CSS v4
• Icons: Lucide React
• Data Fetching/Scraping: Axios & Cheerio

---

Walkthrough & Features

The dashboard focuses on providing a stunning, premium UI rather than a basic generic layout.

Key Visual Features

• Glassmorphism: Translucent cards with subtle borders and heavy background blurring specifically designed for dark mode aesthetics.
• Ambient Lighting: CSS radial gradients provide a backdrop glow (cyan and blue orbs) complementing the dark theme.
• Micro-interactions: Rows seamlessly scale and highlight on hover.
• Dynamic Leaderboard: Complete ranking including Gold, Silver, Bronze, and Total medals.

Local Development

If you wish to run the project locally on your machine:

1. Clone the repository and install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open http://localhost:3000 in your browser.

Tracking Excellence • Milano Cortina 2026 • Real-time Data