DEV Community

pushpendra shah
pushpendra shah

Posted on

Building ElectionEdu: An AI-Powered Election Process Education Assistant Introduction

Democracy works best when citizens are informed. Yet many people find the election process confusing β€” from voter registration to how votes are counted. For the Virtual PromptWars Hackathon by Hack2Skill, I built ElectionEdu, an AI-powered web app that makes understanding elections simple, interactive, and engaging.

🎯 The Problem
Most civic education resources are either too boring, too complex, or not interactive enough. First-time voters especially struggle with questions like:

How do I register to vote?
What actually happens on election day?
How are votes counted and certified?
What is a constituency or an EVM?

ElectionEdu solves this by providing an intelligent, conversational assistant backed by Google's Gemini AI.

πŸ’‘ The Solution
ElectionEdu is a full-stack web application with four core modules:

  1. πŸ—ΊοΈ Interactive Election Journey Map A step-by-step clickable timeline that walks users through the entire election process:

Step 1: Voter Registration
Step 2: Campaigning
Step 3: Voting Day
Step 4: Vote Counting
Step 5: Results & Inauguration

Each step expands with detailed explanations when clicked.

  1. πŸ€– Smart Q&A Assistant Powered by Google Gemini API, users can ask any election-related question in natural language and get clear, accurate answers instantly.
  2. πŸ“… Election Timeline A visual Gantt-style chart showing key election dates and deadlines β€” built with React Google Charts.
  3. πŸ“š Glossary & Quiz

A searchable glossary of important election terms
An interactive quiz to test civic knowledge with instant scoring and explanations

πŸ› οΈ Tech Stack
LayerTechnologyFrontendReact 19, Vite, React RouterUI ComponentsLucide React, Custom CSSChartsReact Google ChartsBackendNode.js, ExpressAIGoogle Gemini API (gemini-pro)DeploymentGoogle Cloud RunVersion ControlGitHub

πŸ—οΈ Architecture
User Browser
↓
React Frontend (Cloud Run)
↓
Node.js Backend (Cloud Run)
↓
Google Gemini API
The frontend and backend are deployed as separate Cloud Run services, communicating via REST API. The Gemini API key is securely stored as an environment variable β€” never exposed to the frontend.

πŸš€ Deployment Journey
Deploying on Google Cloud Run was the most challenging and rewarding part. Here's what I learned:
Challenge 1: IAM Permissions
Cloud Build was failing due to missing service account permissions. Fixed by granting the correct IAM roles to the Cloud Build and Compute service accounts.
Challenge 2: Frontend Build in Docker
Since vite is in devDependencies, the Docker build was failing. The fix was using a multi-stage Dockerfile with node:22-slim for building and nginx:stable-alpine for serving β€” keeping the final image lightweight.
Challenge 3: Nginx on Port 8080
Cloud Run requires port 8080. The default nginx config uses port 80, so I created a custom default.conf to serve on 8080.

πŸ“ Project Structure
election-edu-assistant/
β”œβ”€β”€ frontend/
β”‚ β”œβ”€β”€ src/
β”‚ β”‚ β”œβ”€β”€ components/
β”‚ β”‚ β”‚ β”œβ”€β”€ JourneyMap.jsx
β”‚ β”‚ β”‚ β”œβ”€β”€ Timeline.jsx
β”‚ β”‚ β”‚ β”œβ”€β”€ Glossary.jsx
β”‚ β”‚ β”‚ β”œβ”€β”€ Quiz.jsx
β”‚ β”‚ β”‚ └── ChatAssistant.jsx
β”‚ β”‚ └── App.jsx
β”‚ β”œβ”€β”€ Dockerfile
β”‚ └── package.json
β”œβ”€β”€ backend/
β”‚ β”œβ”€β”€ server.js
β”‚ └── package.json
└── README.md

πŸ” Security Practices

Gemini API key stored in Cloud Run environment variables
.env added to .gitignore β€” never committed to GitHub
All AI API calls go through the backend β€” frontend never touches the key
Input sanitization on all user queries

πŸŽ“ What I Learned

Google Cloud Run is incredibly powerful for deploying containerized apps β€” fully managed, scales to zero, and free tier is generous
Multi-stage Docker builds are essential for keeping production images small and efficient
Gemini API is remarkably easy to integrate and produces high-quality, contextually accurate responses
IAM permissions in GCP need careful attention β€” always grant minimum required roles

πŸ”— Links

🌐 Live Demo: https://election-edu-frontend-687469130333.us-central1.run.app/
πŸ’» GitHub: https://github.com/Pushpendra1798/election-edu-assistant

πŸ™ Conclusion
ElectionEdu demonstrates how AI can make civic education more accessible and engaging. By combining Google Gemini's intelligence with an interactive UI and Google Cloud Run's scalability, we can build tools that genuinely help citizens participate more confidently in democracy.
Built with ❀️ for the Virtual PromptWars Hackathon by Hack2Skill.

Top comments (0)