VocAIbulary

• 

  vocaibulary-app

Inspiration

VocAIbulary was born from a frustration with static vocabulary apps and a vision for AI-driven, conversational language learning. I wanted to:

• Replace rote memorization with dynamic, voice-first interactions (like practicing with a tutor)
  
• Leverage the Oxford 3000 word list as a gold standard for foundational English
  
• Combine cutting-edge AI with Apple’s "Liquid Glass" aesthetics for a visually immersive experience
  The name itself embeds "AI" to highlight the core innovation: Artificial Intelligence as a personalized vocabulary coach.

What it does

VocAIbulary transforms vocabulary learning by:

• 🗣️ Voice-first practice: Speak answers or listen to AI-generated clues (via ElevenLabs/Web Speech API)
  
• � Adaptive difficulty: GPT-3.5 tailors clues to user proficiency (beginner → advanced)
  
• 🎯 Oxford 3000 focus: Targets high-frequency words with contextual examples
  
• ✨ Liquid Glass UI: A tactile, shimmering interface that enhances engagement
  
• 📊 Progress tracking: Real-time stats on accuracy, streaks, and mastered words
  

How we built it

Tech Stack:

• Frontend: React + TypeScript (Vite), Tailwind CSS (Liquid Glass effects)
  
• AI Services: OpenAI GPT-3.5 (clues/words), ElevenLabs (TTS), Web Speech API (STT)
  
• State Management: Custom useGameState hook for game flow
  

Key Components:

1. AI Service Layer:
   
   • AIService class handles GPT-3.5 prompts (e.g., "Generate a beginner clue for 'ambiguous' in JSON")
     
   • Caches common phrases to reduce API calls
     
2. Voice Engine:
   
   • SpeechService integrates ElevenLabs (high-quality TTS) + browser-native speech recognition
     
   • Fallback to multiple-choice inputs when voice fails
     
3. Game Logic:
   
   • Adaptive difficulty scaling based on user performance
     
   • Error resilience with exponential backoff retries (apiErrorHandler.js)
     

Challenges we ran into

Accomplishments that we're proud of

• 🚀 Launched MVP in 24 hours as a solo developer
  
• 🎨 UI Innovation: Liquid Glass design praised for its "addictive tactile feedback"
  

What we learned

• API Integration: Integrating two different APIs to work in harmony
• optimize API token usage: reduce wasteful use of tokens, especially ElevenLabsAPI tokens, by dividing the speech setting into three: No Speech (Visual interface only, saves token), Concise Speech (Brief, essential audio only), and Full Speech (Complete audio guidance and feedback)

What's next for VocAIbulary

1. Mobile Apps: iOS/Android ports with offline mode (cached words/clues)
   
2. Educator Tools: Classroom dashboards + group progress analytics
   
3. AI Tutor 2.0:
   
   • Fine-tuned LLM for non-native speaker interactions
     
   • Multimodal learning (images + audio + text)
     
4. Community Features: Shared word lists + competitive challenges
   
5. Expanded Languages: Spanish/French modes with localized Oxford word lists
   

Built With

• elevenlabs
• openai
• react
• tailwind
• typescript
• vite