DEV Community

Hitesh Kumar Sahoo
Hitesh Kumar Sahoo

Posted on

Building an AI-Powered Voter Education Assistant with Vanilla JS & Gemini

#googlecloud #ai #webdev #javascript

The Vision

Civic technology is at its best when it removes barriers to information.
I set out to solve a very specific problem: How can we make the often confusing electoral process—from registration to results—accessible and interactive for the average citizen?

The result is the Voter Education Assistant, a Single Page Application (SPA) that acts as an interactive timeline and AI-powered guide for voters.

The Architecture: Why I Avoided a Framework

In modern web development, it's tempting to reach for React, Next.js, or Vue immediately. However, for an educational guide designed to be lightweight, universally accessible, and blazing fast, I opted for a purely modular Vanilla JavaScript approach.

1. The Core Stack

  • HTML/CSS: Semantic structure with custom CSS (avoiding heavy libraries).
  • JavaScript: Native ES6 modules (app.js, bot.js, firebase-config.js) to keep the global scope clean and logic separated.
  • Database: Google Firebase Firestore for tracking user progress securely.
  • AI Engine: Google Gemini 1.5 Flash via native REST API calls.

Bypassing SDK Limitations with Native fetch()

One of the most interesting challenges during this build was integrating the Gemini AI. Initially, I used the @google/generative-ai SDK. However, due to browser caching issues and module resolution conflicts in a strict non-bundler environment, the SDK occasionally triggered silent 404 and 400 errors.

To guarantee 100% uptime and bypass these limitations, I completely decoupled the AI from the SDK and built a native REST wrapper.

// A simplified look at the native fetch implementation bypassing the SDK
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${API_KEY}`;

const response = await fetch(API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ contents: newHistory })
});
const data = await response.json();
Enter fullscreen mode Exit fullscreen mode

This simple pivot immediately resolved all environment conflicts and made the chatbot wildly responsive.

Security and Cloud Run Deployment

Because this application handles civic data, security could not be an afterthought.

  • XSS Protection: Strict Content Security Policies (CSP) were defined, and DOM manipulation strictly utilizes .textContent rather than .innerHTML.
  • Containerization: The app is containerized using a lightweight Nginx Alpine Docker image.
  • Serverless Hosting: It is deployed to Google Cloud Run, ensuring it can scale from 10 users to 10,000 instantly without managing infrastructure.

Final Thoughts

Building the Voter Education Assistant was a masterclass in building clean, dependency-free web applications that leverage state-of-the-art AI. By combining the speed of native JavaScript with the reasoning capabilities of Gemini, we can create tools that genuinely empower citizens.

You can check out the full source code on my GitHub repository here: Voter Education Assistant on GitHub.

Top comments (0)