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 Design

📚 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