Rivalry Roast 🔥 — AI-Powered World Cup Banter Generator

A developer built Rivalry Roast, a web app that uses Google Gemini to generate humorous roasts about rivalries between World Cup 2026 teams. The single-page frontend, built with React and Tailwind CSS, sends team selections to the Gemini API and displays the AI-generated banter with text-to-speech. The project avoids a database by relying on Gemini's general knowledge of football history and culture.

This is a submission for Weekend Challenge: Passion Edition 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: 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. gemini-2.5-flash | 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 | 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 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 https://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. The core of the app is the Gemini API call using the @google/genai SDK: js 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. 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.