Think. Connect. Solve. Grow!
A premium, portfolio-grade metacognitive spatial puzzle game for kids ages 5–9. Built with React, Tailwind CSS, Framer Motion, TypeScript, and Firebase.
Brain Bugs is designed as a production-grade, pre-release showcase app for senior frontend, QA, and AI product roles. It exhibits:
- Dynamic Responsive UX: Automatically adapts to any screen. On desktop viewports, it encapsulates itself in a highly premium, pixel-perfect smartphone mockup container complete with interactive elements, a dynamic island notch, and ambient background glow.
- Robust State & Error Handling: Zero-tolerance resilience on corrupt or missing
localStorageitems, secure regex email inputs, and structured fallback navigation. - Bilingual Localization (i18n): Features a full bilingual translation dictionary (English & Spanish) dynamically controlled by a pre-auth language selector button and global context.
- Vercel Enterprise Security Headers: Equipped with strict
Content-Security-Policy(CSP),X-Content-Type-Options,X-Frame-Options, andReferrer-Policyheaders configured invercel.jsonto prevent XSS, clickjacking, and mime-type sniffing. - Print-Optimized Styles: Native support for printing parent reports cleanly without UI chrome or physical smartphone shells using modern CSS
@media printdirectives.
Brain Bugs takes a strict privacy-first, parent-in-the-loop approach to cognitive guidance:
- Non-Clinical Boundaries: "Cognitive Bugs" are used purely as educational metaphors for thinking styles (e.g., Bobo represents cognitive confirmation bias, Zig represent anchoring). The app explicitly rejects all diagnostic, medical, or clinical claims.
- Deterministic Heuristics (Privacy-Safe): The Bug Coach operates using local deterministic heuristic score matrices. It does not transmit child gameplay telemetry, raw keystrokes, or diagnostic files to external LLM servers, preventing data extraction or privacy leaks.
- COPPA & GDPR-K Compliance: Children never sign up directly. A "Parent Gate" protects all dashboard and authentication portals. No personal data, tracking cookies, ads, or chat interfaces exist within the children's view.
- Explicit Disclaimers: Visible legal and educational disclaimers are built directly into the Settings panel, alongside a safe "Clear Demo Data" button that completely purges local storage cache and refreshes state securely.
| Category | Details |
|---|---|
| Engine | Drag-and-drop spatial grid engine with multi-rotation, cell occupancy checkers, and live hover preview. |
| Aesthetics | Curated premium dark-theme palettes, custom-designed SVG bug graphics, and smooth micro-animations. |
| Auth | Dual mode: safe localStorage mock session sandbox OR production-ready live Firebase Authentication integration. |
| Profiles | Multiple kid profiles, customizable nickname, favorite theme colors, customizable companion bugs, and full editing options. |
| Worlds | 🌿 Meadow Path · 💎 Crystal Cave · 🤖 Robo Reef (15 hand-crafted puzzles with star-gated thresholds). |
| Daily Quest | Time-sensitive challenge mode providing double XP (+20 XP) and special collectible medals. |
| AI Coach | Deterministic coaching hints (e.g., "Think about the corners!", "Try a different rotation!") based on remaining pieces and moves. |
| Medals | 9 collectible achievement badges with distinct visual emojis and custom unlock requirements. |
| Parent Dashboard | Visual metrics, progress tracking, print-friendly report cards, and physical off-screen play recommendations. |
| Settings | Complete sound/music controls, voice profiles (Space Bug, Standard Coach, Robot), language toggle, AI disclaimers, and local sandbox reset options. |
# Clone or unzip the directory
cd brain-bugs
# Install dependencies
npm install
# Run local development server
npm run dev
# Run static TypeScript typecheck
npm run typecheck
# Build for production
npm run build- AI Engine: The "Bug Coach" uses local deterministic heuristics. Live LLM API endpoints are avoided to prevent child-unsafe hallucinations and preserve COPPA boundaries.
- Offline PWA: Does not currently include a service worker or offline web manifest.
- P0: Firebase Authentication + Cloud Firestore database sync integration.
- P0: Secure HTTP Headers (CSP, XSS, Frame Options) via
vercel.json. - P0: Complete bilingual Spanish/English localization system (i18n).
- P0: High-fidelity premium desktop Smartphone Mockup Frame wrapper.
- P0: "Clear Demo Data" button + explicit non-clinical AI educational disclaimers.
- P1: Framer Motion screen and card animations.
- P1: Daily Quest mode with XP multipliers and custom medal unlocks.
- P2: Bug Lab free-play sandbox.
- P2: Procedural puzzle generator.
- P3: Native mobile build wrapper using Capacitor.
Use this draft to share this outstanding project on your LinkedIn profile!
🚀 Showcase Project: Reimagining Spatial Learning & AI Governance for Kids 🧠🐛
I'm excited to share a project I've been polishing: "Brain Bugs", a premium spatial logic puzzle game designed for kids ages 5-9 that marries micro-interactive UI/UX with strict AI safety boundaries.
Building for children requires an engineering mindset that prioritizes ethics, privacy, and flawless responsiveness. Brain Bugs showcases exactly this through a modern technical stack:
🎨 Technology Stack:
- Core: React + TypeScript + Tailwind CSS
- Animation: Framer Motion for premium micro-interactions and transitions
- Backend: Production-ready Firebase (Auth + Firestore) with local localStorage fallback
- Deployment & Security: Hosted on Vercel with a highly secure Content-Security-Policy (CSP) to block XSS risks
🤖 AI Governance & Metacognition:
In child education, ethical boundaries are paramount. Instead of exposing kids to unvetted external LLMs, the "Bug Coach" uses a deterministic spatial heuristic engine to analyze their moves in real time. It encourages self-reflection, planning, and resilience without clinical diagnostics, complying fully with COPPA guidelines.
📱 Portafolio & UX Details:
- Seamless multi-device responsiveness wrapped inside a beautiful, custom smartphone mockup frame for desktop viewports.
- Pre-auth bilingual toggle (English/Spanish) supporting a full i18n system.
- Print-friendly dashboard sheets utilizing media queries for real-world report sharing.
Check out the code on GitHub or try the live demo on Vercel to explore how spatial puzzles and AI safety come together! Let's build a safer, smarter digital future for kids. 🐛✨
#ReactJS #TypeScript #WebSecurity #AISafety #FrontEndEngineering #ChildrenEducation #UIUX #Vercel #Firebase