Inspiration We were inspired by a simple question: Why isn’t reading practice actually fun for kids? Tools like Amira are widely used, but teachers consistently report that they misinterpret student speech, penalize correct answers, and frustrate learners with accents or speech differences. We wanted to build something that kids would choose to use—something playful, smart, and supportive. That idea became Phonable, a platform where reading meets games.
What We Learned Throughout the process, we explored: How to integrate multimodal AI using the Gemini API for speech understanding. How to build a gamified learning loop that rewards reading with gameplay. How to design kid-friendly interfaces and simplify UX choices. How to structure real-time feedback loops, using error detection and accuracy scoring. How to manage Firestore listeners, authentication flows, and secure client-side logic. We also deepened our understanding of how students learn to read and how AI can support them without replacing teachers.
How We Built It Phonable is built as a web-based platform using: Firebase Hosting for deployment Firestore for real-time user data and book tracking Gemini API for TTS, speech feedback, and comprehension analysis Vanilla JavaScript for the full UI logic A custom side-scrolling game, where each completed book becomes a life Simple PDF line isolation to track reading accuracy Every component—the reading interface, the live feedback engine, and the game—talks to each other through clean event-driven logic. When a student reads a line, we send audio to Gemini, score the accuracy, store results, and update the game state.
Challenges We Faced We hit several major challenges along the way: Speech accuracy on children’s voices: Ensuring the model handled accents, lisps, and fast speech required tuning our prompts and feedback patterns. Real-time Firestore syncing: Getting book progress to update instantly without over-triggering listeners and causing loops. Connecting Gemini to a browser-only environment: We had to carefully structure requests to avoid CORS issues and latency. Game integration: Making the game responsive to reading progress while keeping it fun and simple took several iterations.
