This is a submission for the AssemblyAI Challenge: Really Rad Real-Time.
🎙️VoiceMath ➕✖️ ➖➗
What I Built 🚀
🎉 VoiceMath is an interactive voice-based math quiz application that enhances learning through speech recognition.
🎙️ It uses the AssemblyAI Real-Time Speech-to-Text API to transcribe user responses and creates a dynamic quiz experience.
✨ With glowing animations, score tracking, and seamless voice interaction, it’s a fun way to practice math skills!
Demo 🌟
🚀 Live App: VoiceMath Live Demo
📂 GitHub Repository: VoiceMath Source Code
Screenshots 📸
🎮 Quiz Section
Description: Interactive Quiz Interface
Description: Ongoing quiz interface with real-time voice inputs.
Description: Results Page of Math Quiz
🧠 Logical Reasoning Quiz Section
Description: Interactive Logical Reasoning Quiz Interface
Description: Ongoing Logical Reasoning Quiz interface with real-time voice inputs
Description: Results Page of Logical Reasoning Quiz
📚 Practice Section
Description: Practice mode for users to improve their math skills.
🌟 Leaderboard
Description: A detailed leaderboard showcasing user rankings.
👤 Profile Page
Description: User profile section displaying personalized stats
Journey ✨
Implementation Highlights 💡
🎙️ Real-Time Speech Recognition:
Leveraged AssemblyAI's Streaming API for real-time transcription of user answers during the quiz.
💫 Interactive Animations:
Used Framer Motion for dynamic button animations and transitions, and React Confetti for celebration effects.
🧠 Quiz Logic:
Designed a 10-question dynamic math quiz where questions are generated on the fly.
👍 Enhanced User Feedback:
Utilized sonner library for instant feedback with toasts on correct/incorrect answers.
🔊 Voice Features:
Added text-to-speech functionality for reading out quiz questions.
Tools Used 🛠️
🎨 Frontend: React.js, TypeScript, Tailwind CSS
🌐 APIs: AssemblyAI Real-Time Speech-to-Text
🎉 Animation: Framer Motion, React Confetti
🔔 Feedback: Sonner (toast notifications)
Demo Features 🎯
🎤 Real-time voice input for answering quiz questions.
✨ Beautiful UI with glowing animations and transitions.
🎉 Celebratory effects upon quiz completion.
🔊 Question narration via browser's speech synthesis.
📊 Score and high-score tracking to keep users engaged.
🏆 Leaderboard to compete with friends and other users.
👤 Personalized profile with user stats and achievements.
📚 Practice mode for honing skills in a relaxed setting.
Journey 🌍
🎉 The development of VoiceMath was an exciting challenge!
🎙️ Integrating AssemblyAI’s Streaming API was straightforward with detailed documentation. I used the API to capture real-time audio input and transcribe it into text for evaluating quiz answers.
💫 A focus on user interactivity led to implementing Framer Motion for smooth animations and creating an engaging visual design.
🔊 Adding voice narration via the browser's Speech Synthesis API enriched accessibility and created a delightful experience.
🌟 This project qualifies for additional prompts as it uses AssemblyAI’s Streaming API for its core functionality, creating a truly interactive real-time application.
Thanks for Reading! 💡
❤️ Made with love by Aniruddha Adak
Top comments (0)