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
🛠️ 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! 🗳️✨
Top comments (0)