How I Built VoteWise AI: Gamifying Democracy with Next.js & Gemini 2.5 Flash 🗳️

Ayushi Bhadani — Sat, 02 May 2026 10:36:48 +0000

Democracy is beautiful, but let's be honest: understanding elections can be overwhelmingly complex.

Between confusing voting systems, endless jargon, and language barriers, millions of eligible voters sit out every year simply because the process feels too intimidating. I wanted to change that.

So, I built VoteWise AI — a modern, mobile-first SaaS platform designed to gamify and simplify the democratic process using Google's cutting-edge Gemini 2.5 Flash.

Here is a look at what I built, the tech stack I used, and the challenges I overcame! 🚀

🌟 What is VoteWise AI?
VoteWise AI is a fully responsive, multilingual election guide covering 13 countries and 16 languages. Instead of reading boring government PDFs, users can have a natural, voice-enabled conversation with an AI that knows the ins and outs of their local electoral system.

Key Features:
🤖 Lightning-Fast AI Chat: Powered by Gemini 2.5 Flash, it answers any election question instantly.
📖 Story Mode: This is my favorite feature! It dynamically generates child-friendly analogies and AI illustrations (via Pollinations.ai) to explain complex political concepts like the Electoral College or Parliamentary Democracy.
🌍 Hyper-Localized: Real-time support for 16 languages with native Text-to-Speech (TTS) and Voice Recognition.
📅 Live Election Calendar: 150+ real-world election events with audio reminders.
📱 Mobile-First UI: A sleek, glassmorphic design that mimics the UX of premium AI apps like ChatGPT.
🏗️ The Tech Stack
I wanted this application to be blazing fast, highly secure, and visually stunning. Here is the stack I chose:

-Frontend: Next.js 15 (App Router) + React
-Styling: Tailwind CSS + Framer Motion (for buttery smooth micro-animations)
-State Management: Zustand (with localStorage persistence)
-Backend & Auth: Firebase Anonymous Auth + Firestore (protected by strict Security Rules)
-AI: Google Gemini API
-Deployment: Containerized and hosted on Google Cloud Run

🗳️ The Simulation Feature — Every Country Votes Differently Most civic apps show a generic "pick one" dropdown. VoteWise AI goes deeper:

India's EVM machine plays the authentic electronic BEEP
Australia forces you to RANK candidates (1, 2, 3) — you can't just pick one
USA includes a write-in candidate text box
France is a 2-step envelope system — pick your slip, then insert
All sounds are generated with the Web Audio API — zero audio files, instant load.

🛠️ How It Was Built (And The Challenges)

Hydration & The "Emoji" Problem One of the most interesting bugs I hit was a Next.js Server-Client Hydration Mismatch. It turned out that using String.split('') to parse multi-byte Unicode emojis on the server was causing the DOM to mismatch when it hit the client browser.

The Fix: I learned to use Array.from() which safely handles Unicode surrogate pairs!

Securing the AI Endpoint
Because the Gemini API costs money and can be abused, I couldn't just expose it to the client. I built a secure Next.js API Route (/api/chat) that acts as a middleman. It strictly sanitizes user inputs (preventing prompt injections) and enforces an in-memory IP-based rate limit of 20 requests per minute.
Making it Production Ready for Google Cloud
Getting a Next.js app to run smoothly on Google Cloud Run required optimizing the build. I updated the next.config.ts to include output: 'standalone', which drastically reduced the container size and enabled lightning-fast cold starts. I also had to securely inject the Firebase public keys via Cloud Build while keeping the Gemini secret safely isolated in Cloud Run's Secret Manager.

🎨 The UX Philosophy
I didn't want this to feel like a "government website." I wanted it to feel like a premium SaaS product.

I implemented a dark-mode glassmorphism aesthetic using Tailwind. On mobile devices, I completely overhauled the layout to hide bulky navigation bars behind a slick hamburger menu, ensuring the AI Chat takes 100% of the screen focus. It’s fully responsive and accessible via semantic HTML.

🔗 Try It Out!
I'd love for you to test it out and let me know what you think. Ask it to explain the US Election using a story about pizza toppings! 🍕

🌐 Live Demo: https://votewiseai-543702534688.asia-south1.run.app/
💻 GitHub Repo: AyushiBhadani/votewiseai

If you like the project, I’d be honored if you dropped a ⭐ on the GitHub repo!

Happy Voting! 🗳️✨

🏟️ Building SmartStadia: Revolutionizing the Fan Experience with React & Google Cloud

Ayushi Bhadani — Mon, 13 Apr 2026 04:11:13 +0000

🚀 The Vision
Stadiums are massive, complex environments. Whether it's finding your seat, locating a lost child, or knowing which restroom has the shortest line, the "Match Day" experience can often be stressful.

SmartStadia was born to solve this. It’s an intelligent stadium coordination platform that uses real-time data to make match days safer and more enjoyable.

✨ Key Features

The Command Center (Admin Security) 🔐 We built a role-protected dashboard for stadium authorities. It features:

-Live Incident Mapping: Track medical or safety alerts across the stadium in real-time.
-System Broadcasts: Send instant push alerts to every attendee's device.
-Dynamic Zone Blocking: Instantly "lock down" areas and trigger the routing engine to redirect fans to safety.

Interactive Heatmaps & Smart Routing 🗺️ Using custom SVG-based mapping, fans can:

-See live crowd density (Heatmaps).
-Find the nearest restroom with the shortest queue.
-Locate Child: A unique feature that simulates RFID-wristband -tracking to help parents find their kids instantly.

High-Performance Design 🎨 I prioritized a "Premium Digital Twin" aesthetic.

-Interactive Backgrounds: Mouse-tracking particles and glowing orbs create a futuristic feel.
-Glassmorphism: A sleek, high-contrast UI that looks great on mobile or command-center screens.

🛠 The Tech Stack
-Frontend: React 18, Vite, Tailwind CSS, Framer Motion
-Backend: Node.js, Express
-Deployment: Google Cloud Run (Dockerized), GitHub
-Testing: Vitest & React Testing Library (100% pass rate!)

♿ Accessibility Matters
We believe safety tools must be accessible to everyone. SmartStadia includes full ARIA support for screen readers and high-contrast themes for readability in all lighting conditions.

🏁 Conclusion
Building SmartStadia for the H2S Skill Prompt Wazr competition has been an incredible journey. It pushed us to combine high-level UI design with critical safety logic and professional cloud deployment.

Check out the code on GitHub: https://github.com/AyushiBhadani/SmartStadia_

I’d love to hear your thoughts in the comments! How do you think technology can make live events better? ⬇️

DEV Community: Ayushi Bhadani

How I Built VoteWise AI: Gamifying Democracy with Next.js & Gemini 2.5 Flash 🗳️

🗳️ The Simulation Feature — Every Country Votes Differently Most civic apps show a generic "pick one" dropdown. VoteWise AI goes deeper:

🏟️ Building SmartStadia: Revolutionizing the Fan Experience with React & Google Cloud