DEV Community

Cover image for How We Built a Mental Health App without losing Our Minds(Thanks to Kiro!)
kirodotdev profile image Pragati GP
Pragati GP for kirodotdev

Posted on • Edited on

How We Built a Mental Health App without losing Our Minds(Thanks to Kiro!)

#kiro #ai #appdev #programming

The Beginning: College Students Meet Reality

Ever stared at a blank code editor with the perfect app idea in your head, but zero clue how to actually build it?

That was us – a team of college students with big dreams and even bigger coding challenges – until we discovered Kiro AI, AWS's game-changing development assistant.

When the Kiro hackathon dropped on DevPost, we knew this was our shot to finally build ZenZone:

a mental health app that feels like texting your most supportive friend.

  • AI companion that remembers you
  • Mood tracking that doesn’t suck
  • Wellness features people actually use

Why Kiro Hit Different

We were skeptical about trying yet another AI coding assistant until we discovered Kiro’s SPEC methodology.

Unlike generic code snippet tools, Kiro makes you slow down, think strategically, and build systematically.

SPEC’s Game-Changing Three-Step Process:

  1. requirements.md – Forces you to articulate exactly what you're building while surfacing edge cases.
  2. design.md – Maps out how components connect and data flows before touching code.
  3. task.md – Breaks projects into digestible milestones with logical progression.

Task

What Makes Kiro Special:

  • Collaborative, not controlling – Asks permission at every step.
  • Delightful UX – Smooth animations + that gorgeous purple theme.
  • Complete transparency – Always shows file changes (no black-box magic).

The Tech Behind ZenZone

Building ZenZone felt like solving a fun puzzle. Here’s what powered it:

React Native (Android)

  • My first serious React Native project.
  • Kiro fixed missing dependencies + setup nightmares.
  • Context API + React Navigation for smooth state management.

Recharts (Data Viz)

  • Turned mood tracking into interactive visuals.
  • Our "mood garden" grows a sunflower with your feelings.

AI Chatbot Setup

  • Custom REST API endpoints for NLP.
  • Local storage for conversation memory.
  • Response templates for consistent AI personality.

Other Details

  • React Native Animated API for micro-interactions.
  • SVG animations for breathing exercise timers.
  • Swipe gestures for affirmation cards.
  • Optional privacy-first sign-in (no data harvesting).

When Everything Clicked

Every project has those “why did I start this?” moments.

Kiro turned ours into breakthroughs.

Kiro

  • From Vague Vision → Clear Direction
    Started with “mental health app that doesn’t suck.” SPEC forced us to define real user needs.

  • React Native Reality Check
    Dependency conflicts, config mysteries... systematic troubleshooting saved us.

  • The Engagement Puzzle
    Designing check-ins that feel organic (not homework).

  • Integration Challenges
    Edge-case testing early = fewer disasters later.

What Makes ZenZone Different

Most mental health apps feel like voicemail therapy. We wanted different.

  • AI That Actually Remembers – Feels like texting a friend.
  • Visual Mood Tracking – Mood garden instead of boring graphs.
  • Context-Aware Affirmations – Dynamic messages, not generic fluff.
  • Privacy First – Only email required, no spam.
  • Integrated Mindfulness – Breathing exercises flow naturally with the app. 
User → Open App → Home Page
      → AI Companion Bot → Chat → Mood Detection & Suggestions
      → Mood Garden → Flower State Updates → Progress Growth
      → Daily Affirmations → Personalized Message
      → Calming Animations/Exercises → Relaxation Activities
Enter fullscreen mode Exit fullscreen mode

How Kiro Changed Our Approach

The Old Way:

  • Jump straight from Figma → Code.
  • Make big decisions mid-implementation.
  • Components clashed, debugging = nightmare.

The Kiro Way:

  • Plan every feature before coding.
  • Kiro = our “rubber duck” for architecture.
  • Built systematically, faster + cleaner.

Biggest shift: we’re no longer scared of complex projects. With a structured system, even big scary ideas feel achievable.

What We Actually Built

  • Full React Native app for Android
  • AI chatbot with memory + personality
  • Custom mood garden visualization
  • Smooth animations + micro-interactions

What We Learned:

  • Apps succeed by solving real user needs, not just clever code.
  • Planning doesn’t slow you down – it makes dev smoother.

The Bigger Picture

ZenZone proved that tech can support wellbeing instead of demanding attention.

By focusing on privacy, genuine emotional support, and engaging design, we built something refreshingly different.

What’s Next?

  • Continue developing ZenZone beyond the hackathon.
  • Add more personalized mental health features.
  • Explore AI + structured development for deeper user care.

Our advice for devs using AI tools:

Embrace the planning phase. Those “extra” steps = fewer headaches later.

Link

GitHub Repo

Top comments (0)