← Lab Notes
July 24, 2026 androidthree.jscapacitorhomelabkids-app

Building and Deploying Shape Party: A Kids' Sensory App

This post details the journey from development to deployment of a sensory app for toddlers, highlighting the challenges faced during the Android app build process.

Overview

Shape Party is a multi-game engine designed for baby-sensory and toddler entertainment. It has been consolidated into one repository at ~/breadtoasting/shape-party, making it easier to manage and update. The app includes various games like memory, dance, rhythm, stack, trace, dots, coloring sheet generator, studio, words, and puzzle. A significant milestone was the successful deployment of an Android version on Google Play.

Background

Shape Party began as a collection of scattered codebases before being consolidated in 2026-07-12. The app is built using three.js for rendering and runs as a Progressive Web App (PWA) with no external dependencies, adhering to privacy rules for children's apps.

How It Works

Consolidation and Structure

The repository structure now looks like this:

~/breadtoasting/shape-party/
  ├── engine/html/index.html -> /shapeparty/, the sensory toy itself
  └── play/ -> /play/, the "Shape Party Play" launcher plus 10 games

App Build Process

The app was built using Capacitor 7 and signed with our own upload keystore. The process involved multiple iterations to ensure stability across different devices.

Version 1: First Working Build (~6.5MB)

  • Initial build that worked on the device but had some issues.

Version 2 ("1.1"): Fixed Swipe-to-Scroll Bug

  • Fixed a swipe-to-scroll bug in the carousel home screen.
  • Merged the trace and dots games into one.
  • Bundled the "Watch the Party" engine into the app itself instead of linking to the live website.

Version 3 ("1.2"): Engine-Bundling Crash Fix

  • A bundling issue introduced a real crash due to network requests in the music-discovery code.
  • Fixed by short-circuiting the music discovery and falling back to built-in synth music.

Version 4 ("1.2.1"): Additional Fixes

  • Tapping the hero "Watch the Party!" button still didn't navigate anywhere.
    • Root cause was an absolute directory path (/shapeparty/) in navigation, fixed by matching the working pattern.
  • App wasn't filling the whole screen — added real edge-to-edge fullscreen handling.
  • Added a back button to the sensory-toy screen itself.

Version 5 ("1.3"): Bundled All Fixes

  • Combined all fixes from version 4 into one release.

Design Enhancements

The home screen was redesigned with a swipeable card carousel and dark starfield theme. Mini 3D three.js scenes were added as icons for each game, but this introduced a rendering bug that was resolved by dropping the continuous spin animations.

Results

  • The app is now available on Google Play internal testing.
  • Real device testing revealed issues not seen in local development environments due to network differences.
  • Lessons learned from deploying the first app include:
    • First release requires extra processing time for Google's malware scan.
    • Target countries/regions setting must be set during release.
    • Sideloading a raw APK conflicts with Play-managed installs.

Lessons Learned

  1. Device-Specific Bugs: Real devices can exhibit different behaviors compared to local development environments, especially regarding network requests and resource contention.
  2. Deployment Best Practices: Always test thoroughly on real devices, as certain issues may not be reproducible in a sandboxed environment.
  3. Privacy Considerations: Adhering to privacy rules for children's apps means avoiding external dependencies and bundling necessary resources.

Conclusion

Building and deploying Shape Party was a complex process that required multiple iterations and fixes. The lessons learned will undoubtedly help future projects, ensuring smoother deployments and better user experiences on real devices.

This draft covers the key points from Garrett's notes while adhering to the specified rules.

Was this useful?