{"slug": "rivalry-roast-ai-powered-world-cup-banter-generator", "title": "Rivalry Roast 🔥 — AI-Powered World Cup Banter Generator", "summary": "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.", "body_md": "*This is a submission for Weekend Challenge: Passion Edition*\n\n**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.\n\nThe 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.\n\n**Features:**\n\n**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.\n\n`gemini-2.5-flash`\n\n)| Layer | Technology |\n|---|---|\n| Frontend | React (via Vite) |\n| Styling | Tailwind CSS v4 |\n| AI | Google Gemini API (`gemini-2.5-flash` ) |\n| Speech | Web Speech API (browser built-in) |\n| Flags | flagcdn.com (free CDN) |\n\nThe 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.\n\n```\nUser picks Team A & Team B\n        ↓\nPrompt sent to Gemini API:\n\"You are a witty football commentator. Generate a\nfunny roast about the rivalry between [Team A] and\n[Team B] in the World Cup context...\"\n        ↓\nAI response displayed as a styled \"roast card\"\n+ auto-read aloud via Text-to-Speech\n```\n\n**1. Prompt Engineering for Safe Humor**\n\nThe 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.\"\n\n**2. No Database Needed**\n\nInstead 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.\n\n**3. Flag Images Over Emoji**\n\nWindows 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.\n\n**4. Markdown Stripping**\n\nDespite prompting for plain text, Gemini occasionally returns markdown formatting (`**bold**`\n\n). A `stripMarkdown`\n\nutility cleans the output before rendering.\n\nThe core of the app is the Gemini API call using the `@google/genai`\n\nSDK:\n\n``` js\nimport { GoogleGenAI } from \"@google/genai\";\n\nconst ai = new GoogleGenAI({ apiKey: import.meta.env.VITE_GEMINI_API_KEY });\n\nconst generateRoast = async (teamA, teamB) => {\n  const response = await ai.models.generateContent({\n    model: \"gemini-2.5-flash\",\n    contents: buildRoastPrompt(teamA.name, teamB.name),\n  });\n  return response.text;\n};\n```\n\nGemini 2.5 Flash was chosen for its speed (roasts generate in 2-5 seconds) and its strong general knowledge about football history and culture.\n\n`gemini-2.5-flash`\n\n) 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.", "url": "https://wpnews.pro/news/rivalry-roast-ai-powered-world-cup-banter-generator", "canonical_source": "https://dev.to/baruna_abirawa_374ef1f781/rivalry-roast-ai-powered-world-cup-banter-generator-4j0e", "published_at": "2026-07-13 01:30:47+00:00", "updated_at": "2026-07-13 01:43:48.956023+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "developer-tools"], "entities": ["Google Gemini", "React", "Tailwind CSS", "Vite", "flagcdn.com", "Web Speech API"], "alternates": {"html": "https://wpnews.pro/news/rivalry-roast-ai-powered-world-cup-banter-generator", "markdown": "https://wpnews.pro/news/rivalry-roast-ai-powered-world-cup-banter-generator.md", "text": "https://wpnews.pro/news/rivalry-roast-ai-powered-world-cup-banter-generator.txt", "jsonld": "https://wpnews.pro/news/rivalry-roast-ai-powered-world-cup-banter-generator.jsonld"}}