In the modern era of AI, we often assume that building a "Smart Assistant" requires complex backend architecture, heavy LLM integrations, and expensive API keys. But what if you could build a context-aware, multi-lingual, voice-activated chatbot using purely frontend technologies?
I built SEGA Pro (Smart Election Guide Assistant) — a zero-backend, privacy-first web application designed to guide citizens through the complex Indian electoral process using dynamic logic, native voice APIs, and Google Services.
Here is how I built it.
1. Zero Backend & Zero Keys
The primary constraint of the hackathon was strict: No backend servers and no secret API keys.
This meant I couldn't rely on Node.js, Python, or standard OpenAI integrations. Everything had to happen securely inside the user's browser (Client-Side).
To achieve this, I engineered a highly optimized JavaScript State Machine. Instead of sending user inputs to a server to be parsed by an LLM, the state machine acts as the chatbot's "brain" locally. It dynamically tracks the user's journey—evaluating their age, first-time voter status, and ID availability—to branch into three distinct, real-world registration flows (Eligibility, Registration, and Voting).
2. Multi-Lingual Voice AI
Accessibility is critical for an election tool. India has vast linguistic diversity, and typing is a barrier for many rural voters. I needed the bot to understand multiple languages natively.
Instead of paying for expensive cloud translation APIs, I leveraged the browser's native Web Speech API combined with a custom-styled Google Translate widget.
3.The Technical Magic:
I built a custom, glassmorphic dropdown that seamlessly triggers Google Translate, restricted to 13 major Indian languages to optimize loading speeds.
I bridged the UI language selection with the Web Speech API. If a user selects Tamil (ta-IN), the microphone instantly adapts to listen for Tamil.
I expanded the State Machine's Regex dictionary to recognize localized affirmations. The bot natively understands that "Yes", "हाँ", "ஆம்", and "అవును" all mean the same thing, allowing users to complete the entire conversational flow without speaking a word of English.
How SEGA Pro Works
While there is no backend server, the application feels alive. Here is exactly how the demo guides a citizen through the voting process:
1. The Language Selection:
When a user opens the app, they can immediately use the custom dropdown at the top to select their preferred language (e.g., Hindi, Tamil, Bengali). The entire interface translates instantly. Behind the scenes, the JavaScript also updates the Web Speech API's listening dictionary to match this language.
2. The Eligibility Check (Age):
The bot initiates the conversation by asking for the user's age. The user can either type their age or click the microphone to speak it (e.g., saying "अठारह" for 18).
Logic branch:
If the user is under 18, the bot politely informs them they are ineligible and stops the flow.
If they are 18 or older, the Journey Tracker at the top updates the "Eligibility" step to completed (Green).
3. The Experience Branching (First-Time vs. Existing):
The bot then asks if this is their first time voting. The user can simply speak "Yes" or "No" in their chosen Indian language.
if Yes or NO it ask if you currently have a valid Voter ID card
if Yes then it gives them their Election Summary,what to
do on election day, gives them Personalized Recommendations
and a readiness score andit guides them on how to locate their
polling booth and how evm works? , can make quizzes too if
askedif No then it gives them their Election Summary, gives them
Personalized Recommendations,a readiness score and
registration steps if needed for user and it guides them on how to
locate their polling booth and** Documents needed , can make
**quizzes too if asked.The bot guides them directly to the NVSP
(National Voter's Service Portal) with step-by-step instructions on
filling out Form 6 and others forms if needed. It tells them how to
download an e-EPIC card.
4. Quiz:(if taken) As the user answers questions, the dynamic progress bar at the top of the screen fills up. Once the main flow is complete, the user can take a 3-question "Readiness Quiz" to test their knowledge and also we get a score too.
5. The Final Output: Upon finishing the quiz, a dynamic Google Charts Gauge renders directly inside the chat window. It points to a final "Readiness Score" (out of 100), giving the user a highly visual, gamified summary of their election preparedness.
EXAMPLE:
4.Google Services, 0 API Keys
A major focus area of the evaluation was the meaningful integration of Google Services. I managed to integrate five distinct services while maintaining my "keyless" constraint:
Google Translate (Public Widget): creating a seamless native UI and for translation too.
Google Charts API: Upon completing the "Readiness Quiz," the bot dynamically renders a colorful Readiness Gauge bubble.
Google Analytics 4 (GA4): Implemented via a public Measurement ID for safe, keyless traffic tracking.
Google Fonts: Utilizing for clean, modern typography.
5.Premium UX & Performance
Building a static app doesn't mean sacrificing aesthetics.
Design: I implemented a modern "Glassmorphism" UI with smooth Dark/Light mode toggle, and custom scrollbars.
Performance: Because there is no backend latency, the bot's responses are instantaneous. The entire project size is well under 1MB, ensuring it loads perfectly even on slow 3G mobile networks.
Building SEGA Pro proved that you don't always need massive infrastructure to build something smart, impactful, and highly accessible. By creatively combining modern browser APIs with optimized frontend logic, you can deliver "AI-like" experiences that are 100% secure, incredibly fast, and completely free to host.
Check out the project here:
🔗 Live Demo: https://sega-pro-955338303650.us-central1.run.app
💻 GitHub Repo: https://github.com/Sreejith004/SEGA-PRO---PROMPT-WAR-.git
I would love to hear your thoughts or feedback in the comments below!
There may be changes in this project. And this is done using antigravity.
