Clash-of-Minds

Inspiration We started this hackathon wanting to build a standard quiz platform. But last night, while taking a break to play Clash Royale, we had a realization.

We noticed we were hyper-focused, calculating elixir costs and strategy, completely immersed. We asked ourselves:

'Why does fighting a goblin feel so important, but learning Neural Networks feels so optional?'

That was the spark. We scrapped the boring quiz interface and built Clash of Minds. We realized that if we could bring that same 'Battle Energy' to education, we wouldn't just help students memorize—we'd get them addicted to learning.

What it does Clash of Minds is an RPG learning engine that transforms static study notes into high-stakes boss battles. Instead of passively reading a PDF, users upload their content, and our AI engine procedurally generates a unique "Boss Fight" based on that material.

Key features include:

Procedural Battle Generation: Users upload any PDF or text (e.g., "History of Rome"), and the app spawns a themed boss with health bars, attack stats, and specific weaknesses based on the content.

Sentient Boss Banter: Powered by Gemini 1.5 Flash, the boss isn't a static image. It mocks you when you hesitate ("Is that the best your cortex can do?"), panics when you get a streak, and reacts to the specific topic you are studying.

The Mnemonic Forge: When a player misses a question, we don't just show the right answer. We use Gemini to instantly forge a "Brain Hack"—a funny rhyme or acronym—to ensure they never miss it again.

Oracle Mode (Voice Combat): Using browser Speech APIs, players can shout their answers or commands, making the experience accessible and high-energy.

How we built it We built Clash of Minds using a modern, scalable tech stack designed for real-time interaction:

The Brain (Gemini 1.5 Pro & Flash):

We use Gemini 1.5 Pro for the "Reasoning Layer"—deeply analyzing the uploaded PDFs to extract complex concepts, not just keywords, creating a structured "Battle Manifest."

We use Gemini 1.5 Flash for the "Reaction Layer"—handling the real-time boss banter and Mnemonic Forge with ultra-low latency.

The Frontend (React + Vite + TypeScript):

The UI is built with Tailwind CSS and Framer Motion to replicate the "juicy," bouncy feel of mobile games like Clash Royale (glassmorphism cards, 3D button presses).

The Asset Pipeline:

We utilized Microsoft's 3D Fluent Emojis to give the interface a high-fidelity, game-ready look without needing heavy 3D models.

State Management:

We implemented a robust local state system to track "Mana," "HP," and "Combo Streaks," syncing visual feedback (screen shake, damage numbers) with the player's performance.

Challenges we ran into The "Boring Boss" Problem: Initially, the AI just generated dry questions. The game felt like a multiple-choice test with a health bar. We solved this by prompt-engineering a "Persona System" for Gemini, instructing it to adopt a villainous persona related to the topic (e.g., a "Calculus Overlord" speaks differently than a "History General").

Latency vs. Immersion: Waiting 3 seconds for a boss to reply kills the vibe. We optimized this by switching our banter system to Gemini 1.5 Flash, reducing latency significantly so the insults feel immediate.

Visual Consistency: Making a web app look like a native mobile game was tough. We had to fight standard CSS behaviors to get that "chunky," tactile 3D button feel and proper layer compositing for the particle effects.

Accomplishments that we're proud of The "Oracle Mode" Integration: successfully connecting the browser's Speech-to-Text API with Gemini's reasoning. Shouting "Neural Network!" and seeing the boss take damage feels genuinely magical.

The UI Overhaul: We managed to pivot from a standard SaaS look to a full "Dark Mode Gaming Aesthetic" in under 24 hours, including glassmorphism and particle backgrounds.

Real-Time Mnemonics: Seeing the AI generate a genuinely funny and helpful rhyme for a complex topic on the fly was a huge "It works!" moment for the team.

What we learned Gamification is deep: It's not just about points; it's about "Game Feel"—screen shake, sound effects, and timing are just as important as the code behind them.

The power of Multimodal AI: Gemini isn't just a text generator; it's a game engine. We learned how to use it to generate structured game data (JSON) and creative dialogue simultaneously.

Prompt Engineering for Personality: We learned that giving the model a "role" (e.g., "You are an arrogant raid boss") drastically improves the user experience compared to standard prompts.

What's next for Clash-of-Minds Multiplayer "Raid" Mode: We want to allow 4 students to join a lobby and fight a "Final Exam" boss together, where each player covers a different chapter of the book.

Mobile App: Porting the React code to React Native to get this into the hands of students on the bus or in the library.

Teacher Dashboard: A mode for teachers to "Craft" bosses for their students and track who defeated the "Midterm Dragon."s