🍌 Banana Milk - Project Overview

Inspiration

The tragic events of Vancouver 2026 inspired us to empower children with safety knowledge through interactive storytelling rather than traditional lectures, making critical life skills memorable and engaging.

What it does

An interactive safety game where children adventure with a customizable cat companion through 10 real-world scenarios (stranger danger, online safety, emergencies). Features AI-generated insights via Gemini API and automated parent email reports summarizing choices and recommendations.

How we built it

Frontend: HTML5/CSS3/JavaScript with pixel-art design. Backend: Firebase Authentication & Firestore. AI: Gemini API for personalized insights. Email: EmailJS for parent reports. Audio: Custom system with 5 rotating mumble voices, lofi/zen music, dynamic sound effects. Hosted on Digital Ocean at hack.BananaMilk.tech.

Challenges we ran into

Text gibberish from overlapping animations (fixed with isTyping flag), audio sync issues with mumbles not cycling (resolved with currentMumbleIndex tracker), auth race conditions during signup (solved with isOnboarding flag), background music playing at wrong times (fixed with separate music contexts).

Accomplishments that we're proud of

Complete authentication-to-reporting pipeline, meaningful Gemini AI integration, Animal Crossing-style audio system, automated parent engagement, and making sensitive topics approachable through friendly design.

What we learned

Firebase advanced patterns, Web Audio API, multi-API integration, async workflow management, balancing playfulness with serious content, and that safety education works best when children feel empowered not scared.

What's next for Banana Milk

Near-term: Multi-language support, more scenarios, teacher portal. Long-term: Mobile apps, age-adaptive difficulty, VR/AR experiences, school partnerships. Vision: Global child safety education platform for schools, homes, and communities.