This is a submission for Weekend Challenge: Passion Edition
What I Built
Rivalry Roast is a fun web app that generates hilarious, AI-powered roasts about rivalries between World Cup 2026 teams. Pick any two national teams, hit "Roast Them!", and get a witty commentary packed with football banter, historical references, and cheeky one-liners — all delivered in the style of a charismatic football commentator.
The idea was born from the "passion" theme: football fans express their love for their team through friendly banter and rivalry trash talk. This project celebrates that culture in a shareable, lighthearted way.
Features:
- 🏳️ Select from all 48 World Cup 2026 qualified nations (with real flag images)
- 🔥 AI generates unique, funny roasts for every team combination
- 🔊 Text-to-speech reads the roast aloud automatically
- 📋 Copy & Share buttons for social media
- 🎨 Premium dark UI with glassmorphism, fire-themed gradients, and smooth animations
Demo
Code
Rivalry Roast 🔥 — AI-Powered World Cup Banter Generator
What is it?
Rivalry Roast is a fun web app that generates hilarious, AI-powered roasts about rivalries between World Cup 2026 teams. Pick any two national teams, hit "Roast Them!", and get a witty commentary packed with football banter, historical references, and cheeky one-liners — all delivered in the style of a charismatic football commentator.
Features
- 🏳️ Select from all 48 World Cup 2026 qualified nations (with real flag images)
- 🔥 AI generates unique, funny roasts for every team combination
- 🔊 Text-to-speech reads the roast aloud automatically
- 📋 Copy & Share buttons for social media
- 🎨 Premium dark UI with glassmorphism, fire-themed gradients, and smooth animations
Tech Stack
- Frontend: React (via Vite)
- Styling: Tailwind CSS v4
-
AI: Google Gemini API (
gemini-2.5-flash) - Speech: Web Speech API (browser built-in)
- Flags: flagcdn.com (free CDN)
Architecture
…How I Built It
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React (via Vite) |
| Styling | Tailwind CSS v4 |
| AI | Google Gemini API (gemini-2.5-flash) |
| Speech | Web Speech API (browser built-in) |
| Flags | flagcdn.com (free CDN) |
Architecture
The app is intentionally simple — a single-page frontend with no backend or database. All "rivalry knowledge" comes directly from Google Gemini's general knowledge, making the scope small enough for a weekend build.
User picks Team A & Team B
↓
Prompt sent to Gemini API:
"You are a witty football commentator. Generate a
funny roast about the rivalry between [Team A] and
[Team B] in the World Cup context..."
↓
AI response displayed as a styled "roast card"
+ auto-read aloud via Text-to-Speech
Interesting Technical Decisions
1. Prompt Engineering for Safe Humor
The key challenge was making Gemini consistently produce funny content without crossing into offensive territory. The prompt explicitly instructs the model to keep things "friendly and funny," include real historical references, and write in a style "fans of BOTH teams would laugh at."
2. No Database Needed
Instead of building a rivalry database, I let the AI model handle all the historical context. This keeps the project scope minimal while still producing rich, contextual content — Gemini knows about Argentina vs Brazil, England vs Germany, and even lesser-known matchups.
3. Flag Images Over Emoji
Windows doesn't render flag emojis natively (they show as letter codes like "AR" instead of 🇦🇷). I switched to real flag images from flagcdn.com for cross-platform consistency.
4. Markdown Stripping
Despite prompting for plain text, Gemini occasionally returns markdown formatting (**bold**). A stripMarkdown utility cleans the output before rendering.
Google Gemini Integration
The core of the app is the Gemini API call using the @google/genai SDK:
import { GoogleGenAI } from "@google/genai";
const ai = new GoogleGenAI({ apiKey: import.meta.env.VITE_GEMINI_API_KEY });
const generateRoast = async (teamA, teamB) => {
const response = await ai.models.generateContent({
model: "gemini-2.5-flash",
contents: buildRoastPrompt(teamA.name, teamB.name),
});
return response.text;
};
Gemini 2.5 Flash was chosen for its speed (roasts generate in 2-5 seconds) and its strong general knowledge about football history and culture.
Prize Categories
-
Best Use of Google AI — Google Gemini API (
gemini-2.5-flash) is the core engine that powers the entire app. Every roast is uniquely generated in real-time based on the user's team selection, leveraging Gemini's knowledge of football history, rivalries, and cultural context to produce entertaining, safe-for-all-ages commentary.
Top comments (0)