kidsisland

Inspiration

Learning Chinese is genuinely hard for kids — thousands of characters, four tones, and unfamiliar sounds can feel overwhelming. I watched kids get lost in gamified apps but bounce off "serious" flashcards. So I asked: what if a Mandarin lesson felt like an island adventure with a friendly panda instead of a classroom?

What it does

KidsIsland is a gamified PWA that helps kids learn Mandarin through five modules: a dashboard with daily check-in rewards and progress tracking, 600+ interactive flashcards with 3D flip animations, native audio, pinyin, and category filters, three quiz modes (meaning recognition, listening comprehension, and pinyin spelling), a multimodal AI Panda Teacher for press-and-hold voice practice with instant pronunciation feedback, and a profile that tracks streaks, badges, and favorites. It supports EN/ES, works offline, and installs like a native app — no store download needed.

How we built it

Built as a vanilla JavaScript PWA — no framework, just clean ES6 modules, CSS3, and GSAP for animations. Five modules are wired together by a lightweight state system. The voice feature glues Deepgram (speech-to-text) with a Mimo proxy for AI responses. Data sync uses Supabase with optional Google login. The learning model follows a simple retention formula:Retention ∝ (N_success ÷ N_attempts) × e^(kt)

where k captures the spacing effect of daily reviews, and progress is tracked with a simple moving average:x̄ₙ = (1/n) · Σᵢ₌₁ⁿ xᵢ

Challenges we ran into

The hardest was voice latency — real-time speech processing felt slow, so I added press-and-hold interaction and local caching to mask the delay. Next was GSAP loading timing: a slow CDN made the first card flip jump instantly, fixed with a CSS fallback transition that GSAP takes over once ready. Finally, bilingual UI (EN/ES) meant every string, including the nav bar, had to be language-aware.

Accomplishments that we're proud of

A multimodal voice conversation with a panda that actually listens and responds in real time. 600+ words with smooth 3D card flips and native audio — all pure vanilla JS, no framework. A true offline PWA that installs and works without a network or app store. What we learned Motivation beats memorization — simple mechanics like daily check-ins and streaks kept learners returning more than any fancy algorithm. Offline capability matters more than most features. And a tiny design choice, like the 3D flip, can dramatically lift engagement.

What's next for KidsIsland

Extend the vocabulary and phrase bank, add reading comprehension stories, and deepen the Panda Teacher with more conversational scenarios and adaptive difficulty based on each child's progress.