What I Built

PassionPulse is an immersive, live-updating World Cup 2026 dashboard that keeps fans connected to the heart of the tournament. The goal was to go beyond standard scoreboards by injecting dynamic, AI-powered insights and a premium user interface.

The dashboard provides a real-time knockout bracket, upcoming matches, live score integration, and interactive features like a "fan passion heatmap". Most uniquely, it uses AI to act as a virtual commentator, generating bite-sized, emotional highlights for the latest games, which are then brought to life via Text-to-Speech!

Code

karthic-keyan / PassionPulse

🔥 PassionPulse — World Cup 2026 Live Dashboard with AI-Powered Commentary. Built for DEV Weekend Challenge: Passion Edition. Features Google Gemini AI commentary, ElevenLabs voice narration, interactive knockout bracket, fan passion heatmap, and stunning dark fire-themed UI.

🔥 PassionPulse — World Cup 2026 Live Dashboard

Feel the passion. Experience the beautiful game like never before.

PassionPulse is an immersive, AI-powered World Cup 2026 companion dashboard that captures the raw emotion and unbridled passion of the beautiful game. Built for the DEV Weekend Challenge: Passion Edition.

✨ Features

🏟️ Live Match Dashboard

Real-time quarterfinal match cards with live score animations, minute tracking, and match highlights. The World Cup 2026 is at the quarterfinal stage — the passion is at its peak!

🏆 Interactive Knockout Bracket

A beautifully animated bracket visualization showing the path from quarterfinals to the final at MetLife Stadium. Clickable matches with glowing live indicators.

🌍 Fan Passion Heatmap

An interactive canvas-rendered world map with animated passion hotspots. See where the fire burns brightest — from Buenos Aires to London, Oslo to Rabat. Hover over any dot to see team details and passion intensity.

🎙️

…

View on GitHub

How I Built It

The project was built using vanilla HTML, CSS, and JS on the frontend to ensure a lightning-fast, reactive experience with smooth micro-animations.

For the backend, I used Node.js deployed on Netlify Functions (live-data.mjs). This serverless setup accomplishes a few critical tasks:

Live Data Fetching: It fetches real-time match data from the open-source worldcup26.ir API.

Metadata Merging: It maps the live match IDs to our local static JSON datasets (football.teams.json) to accurately display flags, colors, and metadata without over-relying on external APIs.

AI Integration: It passes the live scores to Google Gemini AI, prompting it to act as an energetic sports commentator and generate 1-sentence highlights for the matches.

Text-To-Speech: The generated AI commentary is then passed to ElevenLabs to give the dashboard a real voice.

Prize Categories

I am submitting to the following prize categories:

Best Use of Google AI: I used Google Gemini (@google/genai SDK) to dynamically analyze live knockout scores and generate context-aware, emotional sports commentary on the fly.

Best Use of ElevenLabs: The ElevenLabs API takes Gemini's generated text and synthesizes it into high-quality, realistic audio to give users an authentic broadcast experience.

DEV Community

PassionPulse: World Cup 2026 Live Dashboard powered by AI