How I Built Lexicon AI: An Exam-Focused Vocabulary Coach with React, Gemini API & Edge Functions
While prepping for standardized exams like the SAT and IELTS, I kept running into the same workflow bottleneck:
Every time I encountered an unknown word during a practice reading passage, I stopped to manually look up definitions, build Anki/Quizlet flashcards, or prompt ChatGPT (only to get a generic wall of text), which destroyed my reading momentum.
Most vocabulary platforms are either too manual, overly generic, or packed with distracting gamification and pop-ups. High-stakes test prep requires speed, strict focus, and zero-fluff context.
So, I built Lexicon AI ā a dark-mode, exam-focused vocabulary journal designed for speed and active recall.
Here is a breakdown of how it works under the hood and how I built it.
š ļø The Architecture & Tech Stack
I wanted the user experience to feel like a seamless desktop application rather than a slow web app. Here is the stack I chose:
- Frontend: React + Vite, TypeScript, Tailwind CSS (Strict dark mode layout)
- Backend & Database: Supabase (PostgreSQL, real-time sync, database policies)
- Authentication: Clerk Auth
- AI Engine: Google Gemini API (Hosted via Vercel Edge Functions for API key rotation and rate limiting)
- Audio Synthesis: Custom Web Audio PCM decoding for native Text-to-Speech pronunciations
- Hosting: Vercel
š Core Technical Features
1. Rapid Scratchpad Workflow
Instead of manually creating individual flashcards, users can paste unknown words or entire reading passages directly into the Scratchpad.
Through the Gemini API, the backend processes the input, extracts key target vocabulary, and automatically generates:
- Precise exam-focused definitions
- Context sentences matching standard test difficulty
- Synonyms, antonyms, and phonetic breakdowns
2. Lexy AI: Concise Context Assistance
Instead of exposing a raw LLM chat interface (which often produces long, conversational responses), I built Lexy ā a specialized AI assistant tuned specifically to deliver short, 2-3 sentence context explanations and usage nuances without conversational filler.
3. Native Web Audio PCM Decoding
To provide fast, crisp pronunciation audio without loading heavy external media players, I integrated raw PCM audio decoders directly through the browser's Web Audio API, allowing users to hear exact phonetic pronunciations instantly.
4. Active Recall & Offline Mode
Learning doesn't stick with passive reading. The app automatically compiles extracted words into flashcards, matching games, and generated practice reading passages. Collections can also be downloaded locally as structured JSON archives for offline study.
š” What I Learned as a Solo Developer
- Keep Prompts Structured: When building AI features for high-stakes learning, standard open-ended prompts lead to inconsistent output. Enforcing strict JSON schemas on LLM outputs was essential for rendering deterministic UI components like flashcard decks.
- Protect Your API Keys at the Edge: Exposing AI keys on the client side is a huge security risk. Routing all requests through serverless Edge Functions allowed me to enforce rate limits, handle key rotation, and keep infrastructure costs under control.
š Try It Out & Share Feedback
Lexicon AI is 100% free to try:
š Try Lexicon AI Live
š View Project on GitHub
Iād love to hear your feedback on the UI, performance, or suggestions for upcoming features!
Top comments (0)