EmoChild: Your Inner Child in Your Pocket

Your pocket companion for emotional clarity—helping you track feelings, understand patterns, and build inner safety while gently healing your inner child.

Comment

Inspiration

EmoChild started as a simple thought: What if emotional regulation felt as rewarding as caring for a digital pet? Growing up, many of us never learned how to name our feelings, how to express them safely, or how to build inner safety. Tamagotchis felt alive in our pockets, but our emotions didn’t have a place to land.

So I wanted to create a companion for the inner child—a little creature that grows only when you grow emotionally.

Not by feeding it. Not by keeping it alive. But by validating, expressing, and noticing your feelings.

This project became a way to merge psychology, emotional healing, and modern frontend engineering in one playful interface—designed not just for neurodivergent kids, but for children, teenagers, and especially adults who move through a difficult world without the tools to express what they feel.

What it Does

EmoChild is a pastel, gentle emotional companion that mirrors your emotional world.

You log a feeling → your creature brightens, grows, or curls depending on whether you expressed or suppressed that emotion.

The app includes:

  • A blob creature that reflects your emotional patterns
  • Micro-sentences that validate your inner child
  • Quick emotions for rapid logging
  • Inner safety score tracking
  • Color customization
  • Log history, editing, deleting, and CSV export
  • Accessibility-verified color contrast
  • Full local persistence via a custom storage service

It’s not a productivity tool. It’s not a mood tracker. It’s an emotional mirror.

How We Built It

EmoChild was built using a spec-driven development workflow (Kiro Specs), which meant writing requirements, design properties, and tasks before touching React code. This guaranteed correctness from day one.

Tech used:

  • Next.js 14 (App Router)
  • TypeScript
  • React Context API for global emotional state
  • CSS Modules + custom pastel theme system
  • Vitest + React Testing Library for unit tests
  • fast-check for property-based testing
  • LocalStorage service with defensive serialization
  • CSS keyframe animations for the creature’s states (idle, curl, grow, celebrate)

Architecture highlights:

  • Modular component structure
  • Strict TypeScript types for the entire emotion domain
  • 30+ correctness properties ensuring emotional logic behaves predictably
  • Custom color-mapping utilities with brightness/dimming functions

It’s part frontend engineering, part emotional UX design.

Challenges We Ran Into

Building EmoChild was surprisingly emotional in itself — every technical challenge had a psychological layer underneath it. And because the whole project is spec-driven with Kiro, each problem forced me to slow down, rewrite assumptions, and rethink the underlying requirements. With Kiro as an assistive and collaborative agent, every challenge was easily resolved.

  • Translating Emotional Sensitivity Into Code: One early challenge was designing interactions around emotional expression vs suppression. I didn’t want the creature to “punish” anyone for suppressing emotions — that’s a normal coping mechanism, not a moral failure. So I thought of design versions before landing on neutral indicators (🌱 / 🌑) and having the creature gently dim rather than “decline" or die. Research shows that punishment used excessively creates negative emotions, and the goal here is not to punish, but to reward desires behaviours, through gamification.

Kiro Specs, especially the Design phase, helped here because the requirements forced us to define why suppression existed, what emotional meaning it should carry, and what constraints the UI should follow.

  • Privacy-First Architecture: Committing to no backend — all emotional data stored only on the user’s device — created limitations around backups and storage limits. I had to design CSV exports that worked offline, gracefully handle full localStorage scenarios, and ensure nothing broke when storage was unavailable. This is to treat privacy as a core invariant, not an afterthought.

  • The Micro-Sentence Rendering Bug: This was one of the funniest (and most stubborn) issues: micro-sentences were supposed to show every time an emotion was expressed, but they only appeared once after a page refresh. After debugging using simply asking Kiro, we discovered the component never reset its visibility state, so React refused to re-render it on subsequent expressions. The fix was simple — resetting the micro-sentence state on mount with a useEffect — but identifying the root cause required walking back through the Kiro design doc to confirm the intended behavior. Once aligned with the spec, the implementation became obvious.

  • Designing the Bow Accessory: You’d think designing a tiny bow for a blob creature would be easy. It wasn’t. Early attempts didn’t look like a bow at all. Adding ribbon tails made it look overly dramatic and visually heavy. Eventually, simplifying the silhouette — no tails, softer arcs — made it fit the pastel aesthetic. Kiro actually helped here too: the visual behavior of accessories was already defined in the spec through natural language prompting for changes, which prevented the scope from drifting into unnecessary complexity. The bow accessory was entirely designed by Kiro in CSS using natural language prompts.

  • CSV Export & Emoji Preservation: Exporting logs to CSV seemed straightforward… until emojis showed up as broken symbols in Excel. The culprit was encoding: CSV files need a UTF-8 BOM (\uFEFF) to render emojis correctly across spreadsheet software. Adding the BOM and escaping quotes/commas fixed it. This challenge was surprisingly instructive — Kiro’s task breakdown required documenting encoding assumptions, so once the bug appeared, it was easy to trace where those assumptions were violated. It was easy to fix, as describing the issue once again made Kiro resolve it easily and immediately.

  • Accessibility for Emotional Features: Making the app accessible wasn't just about ARIA labels and keyboard navigation - it was about ensuring that screen reader users could experience the same emotional validation as sighted users. I had to carefully craft ARIA live regions for the micro-sentences so they would be announced without interrupting the user's flow, and ensure that the creature's state changes were communicated meaningfully to assistive technologies. This was easily made possible with the help of Kiro's Specs, specifically during the Tasks phase.

  • Vercel Deployment & ESLint Strictness: Deploying to Vercel introduced strict linting errors we didn’t see locally. Unescaped apostrophes in JSX and missing useEffect dependencies caused build failures. Fixes involved escaping characters (you’re → you're) and restructuring some logic with useCallback. Simply giving the error message to Kiro made it fix the error by making necessary changes and commit it.

Accomplishments that we’re proud of

  • A genuinely soothing UI with no dopamine traps
  • A creature that feels emotionally responsive
  • A micro-sentence system that acts like gentle inner-child validation
  • A fully accessible pastel palette with contrast-verified text
  • 100% local-first design—no servers, no tracking
  • A robust test suite with property-based tests ensuring emotional logic never breaks
  • A development process guided by specs, not chaos

And honestly: turning inner-child healing into software is something I never thought would be possible.

What we learned

  • Emotional UX requires understanding Psychology as much as UI
  • You cannot fake gentleness—every interaction must be intentional
  • Specs make development calmer and more predictable
  • Even small apps benefit massively from correctness properties
  • Local-first design creates trust
  • A tiny creature can hold a lot of emotional meaning

Most importantly: software can be a form of self-compassion.

What’s next for EmoChild: Your Inner Child in Your Pocket

  • Deeper emotional analytics (patterns, cycles, triggers) with visualizations
  • Multiple creature types for different emotional styles (such as, a cat)
  • Breathing tool integrations
  • Trauma-informed journaling prompts
  • Cloud sync (optional + encrypted)
  • Sound design: gentle chimes when expressing a feeling
  • Shareable “creature growth journey” images
  • Web app → Mobile app (React Native)

And eventually: a tiny emotional companion that grows with you for years.

Built With

Share this project:

Updates