kidsisland

Inspiration

I wanted to create something that could help my younger cousin learn Chinese in a playful way. Many kids find traditional vocabulary drills boring, so I thought an interactive AI tutor with voice chat would make practice engaging.

What it does

• AI Panda Teacher: Real-time voice conversation with pronunciation feedback
• 600+ flashcards: Interactive cards with pinyin, audio, and category filters
• Quiz modes: Meaning recognition, listening comprehension, pinyin spelling
• Progress tracking: Streak counters, achievement badges, daily check-ins
• Bilingual interface: English/Spanish support with one-tap switching
• PWA features: Installable like an app, offline mode via Service Worker

How we built it

• Frontend: HTML/CSS/JavaScript with GSAP animations
• Backend: Supabase (Auth, Realtime, Functions)
• Voice AI: MiMo API proxied through Supabase Edge Functions
• Deployment: Rsync to VPS with automated scripts

Challenges we ran into

• Voice API integration required secure key management (server-side only)
• Mobile responsive design needed careful touch targets for small screens
• Service Worker caching required proper cache strategy for dynamic content
• Cross-browser compatibility for PWA installation flow

Accomplishments that we're proud of

• Working AI voice tutor with real-time pronunciation correction
• Complete offline experience with full progress sync on reconnect
• Bilingual UI supporting both English and Spanish users
• Production deployment on affordable cloud infrastructure

What we learned

• Server-side API keys prevent client exposure (security best practice)
• Edge functions enable safe API proxying without exposing credentials
• PWA pattern provides native-app experience without app store friction
• Gamification elements significantly increase user engagement metrics

What's next for kidsisland

• Multi-language expansion (Japanese, Korean)
• Parental dashboard with weekly progress reports
• Community challenges and leaderboards
• Video lesson integration with animated explainers

Built With

• asr
• css3
• firebase
• gsap
• html5
• javascript
• mimo-api
• pwa
• responsive-design
• service-worker
• supabase
• tts