Rivalry Arena: Let Gemini Settle Your Passion Wars

This is a submission for Weekend Challenge: Passion Edition

What I Built

Rivalry Arena — a web app that turns any two fandoms, teams, or obsessions into a live, AI-judged head-to-head battle.

Type in two things people love fiercely (say, Messi fans vs. Ronaldo fans), hit "Start the Rivalry," and Google's Gemini AI steps in as the ringside announcer: it generates creative, topic-specific stats, a dramatic commentary paragraph, a four-line trash talk exchange, and a final verdict on who takes the win. Then, at the tap of a button, the whole thing gets read aloud by two alternating voices, like a real broadcast.

With the World Cup happening right now, passion for a side is everywhere. I wanted to build something that actually captures that energy, the stats-quoting, trash-talking, never-backing-down love people have for their team, artist, or hobby, and let AI turn it into a show.

Demo

Try it first, then tell me what rivalry you tested: https://rivalry-arena.vercel.app/

Try It Yourself (takes under a minute)

Rivalry Arena runs entirely in your browser, there's no backend server holding a secret key, which means each visitor uses their own free Google AI key rather than mine. This is standard practice for client-side AI apps (it keeps everyone's usage separate and nobody's quota gets drained by strangers), so here's exactly how to get going:

1. Open the live demo link above.
2. Grab a free Gemini API key at aistudio.google.com/apikey (sign in with any Google account, click "Create API key", copy it).
3. Back in Rivalry Arena, click "API Key" in the top right corner.
4. Paste your key, hit Save.
5. Type in two rivals (anything: teams, artists, hobbies, franchises), hit Start the Rivalry, and watch Gemini generate the whole showdown.
6. Once the verdict lands, hit "Hear It Play Out" to have it read aloud.

The key is stored only in your own browser and is sent directly to Google, never through any server of mine.

Code

https://github.com/NjeriCodeCraft/irvalry-arena

How I Built It

I went in wanting more than a simple form-and-response app, I wanted it to feel like an event.

The idea: Every stage of the experience mirrors a real sports broadcast. You start in the "tunnel" (the setup screen), step into the "ring" (a versus split-screen input), wait through "warm-up" (an animated loading state with rotating hype messages), and then the "reveal", a screen flash, a verdict banner, and the announcer's call.

The engine: Google's Gemini API is the heart of the app. Every rivalry is generated fresh, there's no pre-written content anywhere. I designed a single structured prompt that asks Gemini to return strict JSON: a winner, four creative comparison stats specific to the two topics (never generic filler like "power level"), a punchy commentary paragraph, and a four-line trash talk exchange. Getting Gemini to stay in strict JSON mode without wrapping it in markdown fences took a bit of prompt tuning, but once it clicked, every generation came back clean and ready to render straight into the UI.

The voice: Once the battle result is in, a "Hear It Play Out" button uses the browser's built-in Web Speech API to actually perform the commentary and trash talk out loud, alternating pitch and voice per side, so it sounds like two commentators going back and forth rather than one flat narrator.

The design: I leaned hard into a fight-poster aesthetic: bold condensed display type, a deep crimson-and-black palette, a literal "versus" split-screen for the inputs, and a screen-flash animation on reveal to sell the moment.

Bumps along the way: Google shifted their free-tier model lineup mid-build (more than once), so I learned quickly to point the app at gemini-flash-latest, an alias that automatically tracks whatever Gemini's current default Flash model is, instead of hardcoding a specific version that could get deprecated.

Prize Categories

Submitting for Best Use of Google AI — Gemini isn't a bolted-on feature here, it's the entire engine generating every stat, every line of commentary, and every trash talk exchange, live, for any two topics a person throws at it.