Mindful-Moments

Track your mental health journey with mood logging, journaling, and breathing exercises - all stored privately on your device

Comment

Inspiration

Mental health has become a crisis in our generation. With 1 in 5 adults experiencing mental illness annually, I wanted to create something that could genuinely help people build healthier emotional habits. Most mental health apps either cost money, track user data, or feel too clinical. I was inspired to build a tool that's:

  • Completely free - No subscriptions or paywalls
  • Privacy-first - All data stays on your device
  • Actually helpful - Based on proven techniques (journaling, breathing exercises)
  • Easy to use - Takes just 2 minutes per day

The idea came from my own experience trying different wellness apps and feeling frustrated by their complexity and lack of privacy. I wanted something simple, beautiful, and genuinely useful.

What it does

Mindful Moments is a native mobile application that helps users track their mental wellness through four core features:

1. Daily Mood Tracking

Users select from 5 emotional states (Great, Good, Okay, Low, Sad) and can add journal entries to reflect on their day. The app uses haptic feedback and smooth animations to make tracking feel natural and rewarding.

2. Progress Analytics

The app calculates valuable insights including:

  • Day Streak: Consecutive days of tracking (gamification for motivation)
  • Average Mood: Overall emotional trend over time
  • Mood Distribution: Visual breakdown showing which emotions are most common
  • Personalized Insights: Encouraging messages based on user progress

3. Guided Breathing Exercises

An animated breathing circle guides users through a 4-7-8 breathing technique (based on Dr. Andrew Weil's research). The animation runs at native 60fps using React Native Reanimated, creating a smooth, calming experience that helps reduce anxiety and stress.

4. History & Management

Users can view all past entries with timestamps, read previous journal entries, and delete entries they no longer want. Everything is stored locally using AsyncStorage for complete privacy.

How we built it

Technology Stack

I chose React Native with Expo because it allows building truly native mobile apps for both iOS and Android from a single codebase. Here's the full tech stack:

Core Framework:

  • React Native 0.76
  • Expo SDK 52
  • React 18.3
  • JavaScript

Navigation & UI:

  • React Navigation 6 (Bottom Tab Navigator)
  • Expo Linear Gradient (beautiful UI elements)
  • Expo Vector Icons (Ionicons)
  • Safe Area Context (handles notches/status bars)

Data & Storage:

  • AsyncStorage 2.1 (local persistence)
  • JSON serialization for complex data structures

Animations & Interactions:

  • React Native Reanimated 3.16 (native 60fps animations)
  • Expo Haptics (touch feedback)

Architecture

I structured the project professionally with clear separation of concerns:

src/
├── screens/      # 4 main screens (Today, Stats, History, Settings)
├── components/   # Reusable UI components
├── utils/        # Storage helpers
└── constants/    # Colors, moods, configuration

Each screen is a separate file with focused responsibility, making the code maintainable and scalable.

Key Technical Implementations

1. Streak Calculation Algorithm

// Calculates consecutive days of entries
// Handles timezone differences properly
// Iterates backward from today checking each day

2. AsyncStorage CRUD Operations I built a complete data persistence layer with:

  • saveEntry() - Adds new entries
  • getEntries() - Retrieves all entries
  • deleteEntry() - Removes specific entries
  • clearAllEntries() - Wipes all data

3. Native Animations The breathing exercise uses React Native Reanimated's useSharedValue and withRepeat to create smooth, native animations that run on the UI thread (60fps) without blocking JavaScript execution.

4. Bottom Tab Navigation Implemented professional mobile navigation with custom styling, active/inactive states, and proper screen transitions.

Challenges we ran into

Challenge 1: Streak Calculation Across Timezones

Problem: Users could lose their streak if they traveled across time zones or if midnight transitions weren't handled properly.

Solution: I normalized all dates to midnight (00:00:00) in the user's local timezone before comparing, ensuring consistent streak calculations regardless of the exact time an entry was created.

Challenge 2: Smooth Animations on Low-End Devices

Problem: Initial CSS-based animations were choppy on older phones.

Solution: Switched to React Native Reanimated which runs animations on the native UI thread instead of the JavaScript thread, achieving consistent 60fps even on budget devices.

Challenge 3: AsyncStorage Data Structure

Problem: Needed efficient reads/writes while maintaining data integrity.

Solution: Stored entries as a JSON array with timestamps. This allows fast retrieval of all entries while maintaining chronological order. Used try-catch blocks extensively to handle storage failures gracefully.

Challenge 4: Web Compatibility

Problem: Haptic feedback and some native features don't work on web.

Solution: While the app is designed for mobile, I ensured it gracefully degrades on web by catching unavailability errors. This allows testing in browsers during development.

Challenge 5: UI/UX Polish

Problem: Making the app feel professional, not like a typical "hackathon project."

Solution:

  • Custom color palette (midnight blues, soft lavender, warm peach)
  • Consistent spacing and typography
  • Smooth transitions between screens
  • Haptic feedback on interactions
  • Loading states and error handling

Accomplishments that we're proud of

✅ Built a complete, production-ready mobile app - Not just a prototype, but a fully functional application with 4 polished screens

✅ ~1,500 lines of professional code - Modular architecture across 15 files with proper separation of concerns

✅ Native 60fps animations - Smooth breathing exercise that actually feels calming and professional

✅ Privacy-first architecture - All data stays on device, no tracking, no accounts, no cloud

✅ Streak calculation algorithm - Properly handles timezone edge cases and consecutive day tracking

✅ Real mobile app - Not a web wrapper, actual React Native with native features (haptics, gestures)

✅ Works on actual phones - Tested on real devices via Expo Go

✅ Beautiful, unique design - Custom gradient UI that stands out from typical wellness apps

What we learned

Technical Learnings

  1. React Native Reanimated - Deep dive into native animations and the useSharedValue/withTiming API
  2. AsyncStorage best practices - JSON serialization, error handling, data migration strategies
  3. React Navigation - Tab navigators, screen options, navigation lifecycle
  4. Mobile UX patterns - Safe areas, haptic feedback, loading states, mobile-first design
  5. Expo ecosystem - How powerful Expo is for rapid mobile development

Product Learnings

  1. Privacy matters - Users care deeply about data privacy, especially for mental health
  2. Simplicity wins - The best apps do a few things extremely well
  3. Gamification works - Streak counters genuinely motivate daily use
  4. Evidence-based features - Journaling and breathing exercises have real scientific backing

Project Management

  1. Start with MVP - Built core mood tracking first, then added features
  2. Modular code pays off - Separation of screens/components made debugging much easier
  3. Test on real devices early - Emulators don't catch everything

What's next for Mindful Moments

Short-term (Next 2 weeks)

  • Push notifications - Daily reminders to check in
  • Data export - Allow users to export entries as JSON or CSV
  • Charts & visualizations - Mood trends over time using Victory Native
  • Multiple breathing techniques - Box breathing, 4-7-8, resonance breathing

Medium-term (1-2 months)

  • Dark/light theme toggle - User preference for appearance
  • Weekly/monthly reports - Summarize emotional patterns
  • Goal setting - Set wellness goals and track progress
  • Achievements system - Badges for milestones (7-day streak, 30-day streak, etc.)

Long-term (3-6 months)

  • Optional cloud backup - Using Firebase for users who want sync
  • Sleep tracking integration - Correlate mood with sleep quality
  • Meditation timer - Guided meditation sessions
  • Community features - Optional anonymous support groups
  • App Store launch - Publish to iOS App Store and Google Play Store

Technical Roadmap

  • Add TypeScript for better type safety
  • Implement unit tests with Jest
  • Add E2E testing with Detox
  • Optimize bundle size
  • Add Sentry for error tracking (optional, user-controlled)

Impact & Vision

Mental health shouldn't be a luxury. By keeping this app free, private, and accessible, I hope to help people who might not otherwise have access to wellness tools.

The ultimate vision is to create a platform where people can:

  • Build sustainable mental health habits
  • Gain self-awareness about emotional patterns
  • Access evidence-based wellness techniques
  • Own and control their personal data

If this app helps even one person better understand their emotions and build healthier habits, the project is a success.

Made with 💜 for better mental wellness

Built With

Share this project:

Updates

Submission history