- Project Overview
- Technology Stack
- Project Structure
- Features & Components
- Mobile Optimizations
- Configuration Files
- APK Build Process
- Usage Instructions
- Development Guide
Mind Mate is a comprehensive AI-powered mental health companion application built with Next.js and optimized for mobile devices. The app provides offline-first mental wellness tools including mood tracking, journaling, self-care exercises, and AI-powered insights.
- 📱 Mobile-First Design: Fully optimized for mobile devices and APK deployment
- 🔒 Privacy-Focused: All data stays on device, no external servers
- 🎤 Voice Integration: Speech-to-text journaling and text-to-speech responses
- 🧠 AI-Powered: Intelligent mood analysis and personalized recommendations
- 🌙 Dark Mode: Beautiful dark/light theme support
- 📊 Analytics: Comprehensive mood and wellness tracking
- Next.js 15.2.4 - React framework with App Router
- React 19 - Modern React with latest features
- TypeScript - Type-safe development
- Tailwind CSS 3.4.17 - Utility-first CSS framework
- Radix UI - Headless UI components
- Lucide React - Beautiful icon library
- Framer Motion - Smooth animations
- next-themes - Dark/light mode support
- Capacitor 7.4.2 - Cross-platform native runtime
- Android Gradle Plugin - Android build system
- Web Speech API - Native speech recognition/synthesis
- ESLint & Prettier - Code quality and formatting
- PostCSS & Autoprefixer - CSS processing
- Recharts - Data visualization
d:\mirror-chat-app/
├── 📁 app/ # Next.js App Router
│ ├── favicon.ico # App favicon
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Home page component
│
├── 📁 components/ # React components
│ ├── 📁 ui/ # Base UI components (Radix)
│ │ ├── button.tsx # Button component
│ │ ├── card.tsx # Card component
│ │ ├── input.tsx # Input component
│ │ ├── select.tsx # Select dropdown
│ │ ├── tabs.tsx # Tab navigation
│ │ ├── badge.tsx # Badge component
│ │ ├── label.tsx # Form label
│ │ ├── radio-group.tsx # Radio button group
│ │ ├── toast.tsx # Toast notifications
│ │ └── [other-ui-components] # Additional UI components
│ │
│ ├── analytics-view.tsx # Mood analytics dashboard
│ ├── breathing-exercise.tsx # Guided breathing exercises
│ ├── community-support.tsx # Community features
│ ├── crisis-support.tsx # Crisis intervention tools
│ ├── dark-mode-toggle.tsx # Theme switching
│ ├── habit-tracker.tsx # Daily habit tracking
│ ├── journal-entry.tsx # Voice/text journaling
│ ├── mobile-home-dashboard.tsx # Mobile-optimized dashboard
│ ├── mobile-permissions.tsx # Mobile permissions manager
│ ├── mood-tracker.tsx # Daily mood tracking
│ ├── onboarding-flow.tsx # User onboarding process
│ ├── self-care-activities.tsx # Wellness activities
│ ├── settings-panel.tsx # App settings
│ ├── story-time.tsx # Therapeutic stories
│ └── tts-manager.tsx # Text-to-speech engine
│
├── 📁 hooks/ # Custom React hooks
│ ├── use-mobile-keyboard.ts # Mobile keyboard handling
│ ├── use-local-storage.ts # Local storage utilities
│ └── use-speech-recognition.ts # Speech recognition hook
│
├── 📁 lib/ # Utility functions
│ ├── utils.ts # General utilities
│ └── speech-recognition.ts # Speech processing utilities
│
├── 📁 android/ # Android native project
│ ├── 📁 app/ # Android app module
│ │ ├── 📁 src/main/ # Android source code
│ │ └── build.gradle # App build configuration
│ ├── gradle.properties # Gradle properties
│ ├── settings.gradle # Project settings
│ └── gradlew # Gradle wrapper
│
├── 📁 out/ # Next.js static export output
├── 📁 public/ # Static assets
│ └── mind-mate-logo.svg # App logo
│
├── 📁 styles/ # Additional styles
├── capacitor.config.ts # Capacitor configuration
├── next.config.js # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── PROJECT_DOCUMENTATION.md # This documentation
- Multi-step user registration
- Language selection (English, Spanish, French, German, Portuguese)
- Age-appropriate mode selection (Teen/Adult)
- Emergency contact setup
- Mobile permissions integration
Key Features:
- Touch-friendly interface
- Keyboard-aware form handling
- Progress indication
- Mobile-optimized layouts
- Dual Tab Interface:
- 🏠 Home Tab: Quick actions, mood status, daily stats
- 🛠️ Tools Tab: All wellness tools organized
- Settings icon in header (no more cluttered tabs)
- Daily streak tracking
- Quick action cards
- AI-powered insights
- 5-point mood scale with emojis
- Daily mood logging
- Trend analysis and insights
- Historical mood patterns
- Crisis detection and support
Features:
- Visual mood indicators
- Personalized AI responses
- Emergency support triggers
- Export mood data
- Speech-to-text conversion
- Traditional text input option
- Entry categorization
- Search and filter capabilities
- TTS playback of entries
Capabilities:
- Offline voice recognition
- Real-time transcription
- Entry editing and management
- Voice playback of written entries
- Mobile-optimized voice synthesis
- Multi-language support
- APK-compatible implementation
- Encouraging voice responses
- Breathing exercise guidance
Advanced Features:
- Voice chunking for long text
- Mobile browser compatibility
- Fallback voice options
- Dynamic voice loading
- Guided breathing exercises
- Meditation sessions
- Progressive muscle relaxation
- Mindfulness activities
- Customizable timers
- Mood trend visualization
- Weekly/monthly reports
- Pattern recognition
- Correlation insights
- Progress tracking
Charts & Visualizations:
- Line charts for mood trends
- Bar charts for activity frequency
- Heat maps for daily patterns
- Progress indicators
- Emergency contact quick access
- Crisis hotline numbers
- Immediate coping strategies
- Professional resource links
- Safety planning tools
- Mandatory: Microphone (for voice journaling)
- Optional: Notifications, File access
- Clear permission explanations
- Graceful degradation if denied
- Native mobile permission dialogs
- Custom habit creation
- Daily check-in system
- Streak tracking
- Progress visualization
- Habit analytics
// Prevents keyboard from hiding content
// 44px minimum touch targets
// Dynamic viewport adjustments
// Smooth scrolling with momentum- Button Sizes: Minimum 44px for accessibility
- Touch Targets: Optimized spacing between interactive elements
- Gesture Support: Swipe navigation and touch feedback
- Responsive Grids: Adapt to different screen sizes
- Code Splitting: Dynamic imports for better loading
- Image Optimization: Responsive images with Next.js
- Bundle Analysis: Optimized chunk sizes
- Lazy Loading: Components load on demand
- Offline-First: All data stored locally
- Native Permissions: Proper Android permission handling
- Background Tasks: Notification scheduling
- File System Access: Local data persistence
const nextConfig = {
output: 'export', // Static export for APK
trailingSlash: true, // Mobile browser compatibility
images: { unoptimized: true }, // APK image handling
distDir: 'out' // Output directory
}const config: CapacitorConfig = {
appId: 'com.mindmate.app',
appName: 'Mind Mate',
webDir: 'out',
plugins: {
SplashScreen: { /* splash config */ },
StatusBar: { /* status bar config */ },
Keyboard: { /* keyboard behavior */ }
}
}// Mobile-first responsive design
// Dark mode support
// Custom color palette
// Animation utilities{
"compilerOptions": {
"target": "ES2017",
"module": "esnext",
"jsx": "preserve",
"strict": true
}
}# Development build
npm run dev
# Production build
npm run build
# Mobile sync
npx cap sync
# Debug APK
cd android && ./gradlew assembleDebug
# Release APK (requires signing)
npx cap build android📁 android/app/build/outputs/apk/
├── 📁 debug/
│ └── app-debug.apk # ~162MB Debug APK
└── 📁 release/
└── app-release.apk # ~161MB Release APK
- Size: ~162MB (includes all dependencies)
- Target SDK: Android 14 (API 34)
- Min SDK: Android 7.0 (API 24)
- Permissions: Microphone, Storage, Notifications
- Architecture: Universal (all architectures)
-
Install Dependencies
npm install
-
Start Development Server
npm run dev
App runs at:
http://localhost:3000 -
Build for Production
npm run build
- Test in Browser: Open dev tools, toggle device mode
- Test on Device: Access via network IP
- APK Testing: Install debug APK on Android device
- Onboarding: Complete 6-step setup process
- Permissions: Grant microphone access (required)
- Home Dashboard: Explore dual-tab interface
- Mood Check: Log first mood entry
- Voice Journal: Try speech-to-text feature
- Create component in
components/ - Export from
components/index.ts - Add mobile-responsive styles
- Include keyboard handling if needed
- Use
mobile-*CSS classes for mobile-specific styles - Implement touch targets ≥44px
- Test on actual mobile devices
- Consider keyboard behavior
- Use dynamic imports for large components
- Implement proper loading states
- Optimize images and assets
- Monitor bundle size
- Unit Tests: Component functionality
- Integration Tests: User workflows
- Mobile Tests: Touch interactions
- APK Tests: Native features
- Mobile-optimized UI/UX
- Dual-tab home dashboard
- Mobile permissions system
- Voice journaling with TTS
- Mood tracking with AI insights
- Self-care activities
- Crisis support system
- Dark/light mode themes
- Offline-first architecture
- APK build configuration
- Keyboard handling fixes
- Advanced analytics
- Community features
- Habit tracking refinements
- Additional languages
- Widget support
- Wear OS integration
- Advanced AI features
- Cloud sync (optional)
- Professional therapist integration
- Crisis Text Line: Text HOME to 741741
- National Suicide Prevention Lifeline: 988
- International Association for Suicide Prevention: https://www.iasp.info/resources/Crisis_Centres/
- GitHub Issues: For bug reports and feature requests
- Documentation: This file and inline comments
- Community: Mental health tech community
- Data Storage: All data stored locally on device
- No Tracking: No analytics or user tracking
- Open Source: Code available for review
- HIPAA Considerations: Designed with healthcare privacy in mind
This project is built for mental health support and education. All code is provided as-is for learning and therapeutic purposes.
This application was created to provide accessible, private, and effective mental health support tools. Special thanks to the mental health community for guidance and feedback.
- Next.js team for the amazing framework
- Radix UI for accessible components
- Tailwind CSS for utility-first styling
- Capacitor team for mobile deployment
- React community for ecosystem support
Last Updated: January 27, 2025
Version: 0.1.0
Build Status: ✅ Production Ready
APK Status: ✅ Successfully Built
Mind Mate - Your AI-powered mental health companion 🧠💚