ZuZu — Bilingual Learning App for Kids

An interactive Arabic/English learning app for kids featuring tap-and-hear games, AI-generated bilingual stories, and a safe AI voice buddy responding to spoken queries.

Comment

Inspiration

Many bilingual families face a frustrating gap when teaching young kids two languages simultaneously. Traditional language learning apps are either completely static or separate the languages into isolated silos, losing the natural flow of bilingual households.

We built ZuZu to solve this. We wanted a fluid, tablet-first, voice-led environment for kids ages 3–8 where Arabic (RTL) and English (LTR) don't just sit side-by-side but actively synchronize. By combining cutting-edge LLMs (OpenAI's GPT series) with browser-native speech synthesis and recognition, we've created a completely interactive, free-to-operate learning buddy that feels like a soft, living jungle toy.

What it does

ZuZu is a fully bilingual Arabic/English learning adventure designed from the ground up for tablets.

  • Learn & Play (Bilingual Lessons): Kids learn letters, numbers, colors, and shapes. The interface automatically flips mirror layouts dynamically when toggling between Arabic (RTL) and English (LTR). Tap-and-hear feedback provides instant voice pronunciation.
  • AI Stories: Kids select a category (e.g., Space, Animals, Adventure, Magic) and interests, and OpenAI generates an age-appropriate, beautifully structured bilingual story on demand. Each paragraph can be spoken aloud in either language with matching speech-synthesis.
  • The Voice Buddy: A safe, child-friendly conversational AI. Kids speak to the Voice Buddy using browser-native Speech-to-Text (STT), and the Buddy replies with safety-prompted, educational, and fun bilingual answers (TTS).
  • Sticker World & Rewards: Completing quizzes grants persistent, local collectible stickers that children can place inside their own interactive visual scene, making learning feel highly rewarding.
  • Parent Dashboard: Parents can lock settings behind a secure PIN gate to check detailed analytics on their children's progress, accuracy metrics per category (letters, numbers, etc.), manage child profiles, and view generated story books.

How we built it

ZuZu is built on the high-performance Better-T-Stack:

  • Frontend: Next.js 16 (App Router) on React 19 for blazing-fast transitions and layout responsiveness, and Tailwind CSS v4 for clean, instant RTL/LTR mirroring. Component construction leverages shadcn/ui.
  • Backend: Elysia running on the Bun runtime for ultra-low latency, serving type-safe contract APIs via oRPC.
  • Database & ORM: PostgreSQL database using Drizzle ORM to log granular quiz completions, child profiles, and story records.
  • Auth: Clerk for instant, secure parent login.
  • AI Engine: OpenAI GPT models configured via the Vercel AI SDK (@ai-sdk/openai).
  • Speech Core: Browser-native Web Speech API (SpeechSynthesis + webkitSpeechRecognition), making audio-feedback fully keyless, fast, and completely free to scale.

Challenges we faced

  1. Dynamic RTL/LTR Layout Mirroring: Mirroring entire interactive flows (from buttons to grid items) on-the-fly when changing languages is notoriously complex in standard Next.js layouts. We resolved this by building a dedicated DirectionSync context that forces real-time text direction and mirroring across our Tailwind classes.
  2. Child-Safe AI Guardrails: Open-ended voice conversations can be risky for children. We engineered multi-stage, kid-safe system prompts that prevent the AI from discussing inappropriate topics, enforce short/easy-to-understand sentences, and keep responses encouraging.
  3. Local Audio Caching & Latency: Cloud TTS APIs introduce cost and latency. By implementing a highly optimized configuration wrapper around native web speech engines, we obtained instant, zero-latency speech without any recurring cloud bills.

What we learned

We learned how to design highly robust, bilingual layouts using Tailwind CSS v4, manage multi-layered component states in React 19, and harness oRPC for end-to-end type safety between a Bun-based Elysia API server and a Next.js client. We also learned how to fine-tune AI persona boundaries to act reliably as child-facing mentors.

What's next for ZuZu

  • On-the-fly Illustration Generation: Building an automated queue using DALL-E 3 to dynamically generate story-specific cartoon illustrations as the AI crafts them.
  • Voice Pronunciation Feedback: Integrating lightweight audio-scoring models to help kids practice correct pronunciation.
  • Multi-Platform Expansion: Building native iOS and Android apps using React Native and Expo.

Built With

Share this project:

Updates