A gamified web application designed to bridge the gap between "textbook fluency" and real-world comprehension. Built during royal hackaway 9 , it helps users train their ears to understand diverse accents and colloquialisms from around the globe.
🚀 The Problem
Learning a language is hard, but understanding it in the wild is harder. Most learning apps use perfectly enunciated, standard studio voices. But in the real world, people use slang, regional dialects, and heavy accents. 🎮 How It Works
- Choose Your Region: Select an accent you want to practice
- Select Difficulty between easy, medium and hard
- Listen & React: An audio clip plays. You are presented with multiple-choice buttons containing text options.
- Survival Mode: You have 3 Lives. Get it wrong, lose a life.
- High Scores: We use local cookies to save your Personal Best. Can you beat your own high score?
🛠️ Tech Stack & Architecture
We built this project using a modern frontend stack and leveraged Generative AI to create the content pipeline. • Frontend: Javascript, HTML and CSS.
• Deployment: Vercel.
• Audio Synthesis: ElevenLabs API. The Content Pipeline (How we built the data) We didn't want generic sentences like "The cat is on the table." We wanted real slang.
- We created datasets of colloquial phrases specific to certain regions (e.g.,specific Northern slang or Australian idioms).
- Voice Synthesis with ElevenLabs: We fed those text lines into ElevenLabs, selecting specific Voice IDs that matched the demographic and region of the accent (e.g., using a specific British model for the northern dialect).
- Integration: The audio files and text metadata were mapped into a JSON object serving the frontend.
🎨 Design Choices
- Cookie-based Persistence We opted to store High Scores in browser cookies rather than spinning up a full backend database. • Reasoning: We wanted to keep the application lightweight and privacy-focused. Since this is a training tool, local motivation is key. The user competes against themselves without needing to create a login/account.
- Gamification UI We designed the interface with a "Quiz" layout. • Reasoning: Listening comprehension is stressful. By using large, clear buttons for options (rather than asking the user to type what they hear), we reduce friction and allow the user to focus entirely on listening rather than spelling.
🔮 Future Improvements
If we were to take this project further after the hackathon:
• Community Uploads: Allow native speakers to upload their own voice clips to replace the AI generation for 100% authenticity.
• Spaced Repetition: Implement an algorithm to bring back phrases the user struggled with previously.
• Global Leaderboard: Move from cookies to a database (Firebase/Supabase) to compete with friends.
Log in or sign up for Devpost to join the conversation.