VocabPro

Inspiration

Millions struggle with English fluency—not from lack of grammar knowledge, but from fear of speaking, limited practice, and boring methods like flashcards. We wanted to make vocab-building fun, interactive, and real-world relevant—especially for students prepping for job interviews/placements, competitive exams, or professionals wanting confident communication. Inspired by real JAM rounds, debate clubs, and creative storytelling sessions, we turned passive learning into active, gamified speaking adventures powered by AI.

What it does

What it does VocabPro is an AI-powered speaking & vocabulary mastery platform that helps users build rich English vocab, fluency, and confidence through engaging activities:

Jam Sessions: Timed, on-the-spot speaking prompts (like Just-a-Minute interview rounds). AI analyzes your speech in real-time for vocab richness, filler words, pace, pronunciation, and gives instant feedback. Debates: Jump into pro/con debates on trending topics. AI judges structure, advanced vocab usage, arguments, rebuttals, and persuasion skills. Story Weaver & Story Spinner: Turn random words/themes into creative stories—either collaboratively weaving or spinning solo narratives. AI suggests richer synonyms, improves phrasing, and highlights new vocab in context for natural learning.

Result: Addictive practice that makes you speak better, faster, and more impressively—no rote memorization required.

How we built it

VocabPro is a modern, full-stack web app engineered for performance, scalability, and seamless AI integration:

Frontend: React 18 with Vite for fast development and builds, styled with Tailwind CSS + shadcn/ui components. It's a responsive single-page application (SPA) with protected routes managed via React Router. Authentication: Supabase Auth handles secure email/password sign-in with persistent sessions and easy JWT management. Database & Storage: Supabase PostgreSQL (11 tables with Row Level Security policies for data privacy) + Supabase Storage (5 public buckets dedicated to user audio recordings and session files). Backend Logic: 12 Edge Functions (Deno runtime) for serverless API orchestration, handling AI calls, processing, and business logic without a traditional server. AI Orchestration: Multi-model pipeline — Grok for creative content generation, Gemini as primary for structured arguments/fallbacks, and OpenAI for precise scoring and evaluation. TTS Pipeline: Robust fallback chain (ElevenLabs → Google Cloud TTS → OpenAI TTS → browser-native Web Speech Synthesis) to ensure reliable text-to-speech across devices and regions. Speech Handling: Browser-based recording + real-time transcription/processing for Jam Sessions and feedback loops.

We prioritized rapid iteration during the hackathon: started with core React + Supabase MVP, layered in AI multi-model routing and TTS fallbacks, then optimized Edge Functions for low-latency responses. The result is a lightweight, cost-effective, and highly extensible architecture ready for real users. This rewrite keeps the technical depth while making it flow better for judges—showing smart choices (e.g., multi-model resilience, fallback chains, serverless edge compute) without overwhelming. Let me know if you'd like it shorter or with more emphasis on any part! 🚀

Challenges we ran into

Challenges we ran into Real-time speech analysis accuracy: Balancing latency vs. depth of feedback (fillers, pronunciation scoring) was tricky—Web Speech API limitations forced creative fallbacks and post-processing logic. Prompt engineering for AI: Getting Gemini (or equivalent) to generate age-appropriate, unbiased, trending debate topics and constructive feedback without being too generic or repetitive. User experience in browser: Handling audio recording permissions, mobile compatibility, and preventing session drops during long debates/stories. Time crunch: Hackathon deadlines meant prioritizing core loops (JAM + Story) over polish like leaderboards or multi-user debates.

Accomplishments that we're proud of

Built a fully functional AI speaking coach that gives personalized, actionable feedback in seconds—something many language apps still lack. Integrated multiple AI-powered modes seamlessly in one dashboard. Created measurable progress tracking: Vocab score improvements, reduced fillers over sessions, better debate eloquence ratings. Delivered a clean, intuitive UI that works on desktop/mobile—ready for real users right after the hackathon.

What we learned

AI prompt quality is everything: Small tweaks in system prompts dramatically improved feedback relevance and encouragement. Speaking practice needs empathy: AI feedback must be kind yet honest—harsh scoring demotivates; balanced praise + suggestions motivates. Real-time features are hard but rewarding: Latency and browser constraints taught us clever optimizations. User-centric iteration wins: Early testing showed people loved the creative Story modes more than expected—validated focusing on fun over drills.

What's next for VocabPro

Add multiplayer debates (real-time with friends or random opponents). Introduce daily challenges, streaks, and leaderboards for gamification. Expand to accent training, group Jam rooms, and exam-specific modes (IELTS/TOEFL speaking, placement vocab). Integrate more advanced analytics (progress graphs, weak vocab areas). Mobile app version + voice mode enhancements. Open it to more languages or bilingual practice. Ultimately: Become the go-to platform for anyone who wants to speak English like a pro—confidently, creatively, and conversationally.

Built With

• ai-routing
• and-business-logic.-ai/ml-pipeline-(multi-model-for-resilience-and-specialization):-google-gemini-2.5-flash-(via-lovable-ai-gateway)-?-counter-arguments
• and-seamless-ai-powered-language-practice:-languages-&-core-stack:-typescript
• and-storage-(5-dedicated-buckets-for-audio/speech-recordings).-serverless-logic:-12-supabase-edge-functions-(deno-runtime)-for-low-latency-api-orchestration
• browser-native-web-speech-api-(final-fallback-for-recognition/synthesis).-other-integrations:-resend-for-transactional-emails-(e.g.
• data-fetching/caching-(react-query-/-tanstack)
• data-visualization-(recharts-+-chart.js)
• form-handling/validation-(react-hook-form-+-zod).-platform-&-development:-built-end-to-end-on-lovable-?-an-ai-powered-app-builder-that-enabled-us-to-describe-features-in-natural-language
• google-cloud-tts
• html/css-frontend:-react-18-powered-by-vite-(lightning-fast-builds)
• image-validation-grok-3-(xai)-?-creative-jam-session-prompts/content-generation-openai-?-debate-scoring
• languages-&-core-stack:-typescript
• openai-tts
• postgresql-database-(11-tables-with-row-level-security
• progress-reports).-deployment:-lovable-cloud-with-automatic-supabase-edge-function-deployment-?-enabling-instant-previews
• smooth-animations-(framer-motion)
• sql-(for-schema)
• styled-with-tailwind-css-+-shadcn/ui-components.-features-include-protected-routes-(react-router)
• tts-perplexity-ai-?-real-time-factual-research-for-debate-topics-tts-&-speech-pipeline:-robust-fallback-chain-for-reliable-audio:-elevenlabs-(primary)