AccentCoach

AccentCoach is a pronunciation practice platform where users:

Browse challenges with phrases to practice (Beginner to Advanced) Record their voice using the browser's MediaRecorder API Get instant transcription via Valsea's AI API Receive score based on Levenshtein distance (text similarity) Earn points, level up (Novice → Master), and collect badges View their progress on a dashboard with stats and leaderboard How we built it Frontend: Vite + React + TypeScript + Tailwind CSS Backend: Node.js + Express + TypeScript Database: MySQL with tables for users, challenges, progress, badges Voice AI: Valsea API for audio transcription Scoring: Levenshtein distance algorithm to compare transcribed text vs target phrase Key flows:

User records audio → sent as FormData to Valsea API Valsea returns transcription text Server compares transcription with target phrase Score calculated and stored in MySQL Points added, level/badge checks triggered Challenges we ran into MediaRecorder format issues - Browser records in webm but Valsea expected specific format API key security - Had to properly configure environment variables Database schema design - Needed unique constraints for user_progress to track attempts Frontend state management - Handling auth tokens and protected routes Accomplishments that we're proud of Fully functional full-stack app with authentication Real voice recording and transcription pipeline working Gamification system with levels, points, badges, and streaks Responsive mobile-first UI with Tailwind Demo credentials working out of the box What we learned How to integrate third-party AI APIs (Valsea) into a Node backend Levenshtein distance for text similarity scoring React context for auth state management MySQL foreign keys and unique constraints for data integrity What's next for AccentCoach Add support for more languages (not just English) Implement text-to-speech for reference audio playback Add community features (share challenges, comments) AI-powered pronunciation tips based on common errors Mobile app (React Native/Expo)

Built With

• javascript
• mysql
• nextjs
• node.js
• vite