MindMate - Your AI Mental Wellness Companion

An AI-powered mental health companion that provides empathetic conversations, mood tracking, emotional insights, and personalized wellness recommendations to support your daily mental well-being.

Comment

Inspiration

Mental health challenges affect over 970 million people worldwide, yet access to professional help remains limited by cost, stigma, and availability. Many individuals struggle silently — especially young adults and students who face overwhelming academic and social pressures but lack accessible, judgment-free support. We believed that AI could bridge this gap: not by replacing therapists, but by providing an always-available, empathetic first line of support that guides users toward healthier coping strategies and professional help when needed.

What it does

MindMate is an AI-powered mental wellness companion that provides comprehensive, personalized support through multiple evidence-based tools:

  • AI Companion Chat — Powered by Google Gemini, it engages in empathetic, context-aware conversations that analyze emotional patterns in real-time and provide therapeutic responses grounded in CBT and positive psychology frameworks.
  • Mood Analytics Dashboard — Tracks emotional states over time with visual analytics, identifying patterns and triggers that help users understand their mental health trajectory.
  • AI-Powered Journal — Intelligent journaling with smart prompts that adapt to the user's current emotional state, encouraging reflective writing as a therapeutic tool.
  • Breathing Exercises — Four guided techniques (Box Breathing, 4-7-8 Relaxation, Calm Breath, Energizing Breath) with animated visual guidance and session tracking.
  • Wellness Quest — Gamified daily wellness challenges that reward consistent self-care habits, turning mental health maintenance into an engaging experience.
  • Clinical Assessments — PHQ-9 (depression) and GAD-7 (anxiety) standardized screening tools with immediate results and guidance.
  • 5-4-3-2-1 Grounding — Interactive sensory grounding exercise for anxiety and panic episodes.
  • SOS Crisis Button — Immediate access to crisis helplines and emergency resources when users need urgent support.

The app features a smooth dark/light mode, a welcoming onboarding flow, full mobile responsiveness, and persistent chat history — all designed to feel warm, safe, and non-clinical.

How we built it

Frontend: Next.js 15 (App Router) with TypeScript and Tailwind CSS v4, using Framer Motion for fluid animations and a fixed inset-0 flex layout architecture that solves mobile viewport issues (no more hidden tab bars or content behind navigation).

AI Engine: Google Gemini 2.0 Flash API with a carefully engineered system prompt that instructs the model to respond empathetically, use CBT techniques, detect crisis situations, and embed structured emotion data ([EMOTION_DATA] tags) that are parsed on the frontend for real-time mood tracking — all stripped from user-visible output via regex.

Backend: Next.js API routes with Prisma ORM (SQLite for development). We implemented a dual-mode authentication system: next-auth for environments with a persistent database, and an automatic localStorage fallback with SHA-256 password hashing for serverless deployments like Vercel where the filesystem is ephemeral.

Theme System: Custom transition orchestration using a .transitioning class on <html> applied selectively to key elements (not * wildcard, which caused GPU lag) with synchronized 0.25s timing across background-color, color, and border-color.

Design: Glassmorphism cards, gradient accents, and a custom AI-generated logo icon used consistently across the favicon, header, navigation, onboarding, auth modal, chat avatars, and empty states.

Challenges we ran into

  1. Vercel's Ephemeral Filesystem — SQLite doesn't persist on Vercel serverless functions, causing registration failures. We solved this by building a fault-tolerant dual-mode system that detects database availability and seamlessly falls back to localStorage.

  2. Mobile Tab Bar Visibility — This took 5 iterations. AnimatePresence broke flex layouts, fixed positioning left empty space, and h-screen/h-dvh both failed on mobile browsers. The final solution: a fixed inset-0 container with a flex-shrink-0 tab bar inside the flex flow.

  3. EMOTION_DATA Leakage — The AI sometimes output incomplete or unclosed [EMOTION_DATA] tags that appeared in chat. We built a multi-pattern regex that handles complete tags, partial tags, and unclosed tags.

  4. Theme Transition Lag — Applying CSS transitions to * (every element including SVG icons and pseudo-elements) caused noticeable GPU lag. We narrowed the selector to specific element types and reduced the duration to 0.25s.

  5. Onboarding Stale Closures — useCallback captured stale references to the completion handler, making Next/Skip buttons appear to do nothing. Replaced with useRef to always hold the latest callback.

  6. Git Branch Mismatch — Commits were being pushed to master while GitHub's default branch was main, making changes invisible on the repository.

Accomplishments that we're proud of

  • Built a fully functional mental wellness platform with 7+ distinct tools in a single hackathon session
  • Achieved seamless Vercel deployment with zero-downtime fallback for database unavailability
  • Solved the mobile viewport problem with an elegant fixed inset-0 flex architecture
  • Created a custom brand identity with an AI-generated logo integrated across 11+ touchpoints
  • Captured 15 professional presentation screenshots using automated browser sessions
  • Maintained clean, well-documented code with 37 structured commits

What we learned

  • Mobile browsers handle 100vh and 100dvh inconsistently — fixed inset-0 is the most reliable cross-browser approach for full-screen app layouts
  • Serverless environments require defensive programming: always assume external dependencies (databases, file systems) may be unavailable
  • AI models need very specific system prompts and output parsing strategies to reliably embed structured data without leaking it to users
  • CSS * selector transitions are deceptively expensive — selective transitions are critical for performance
  • useCallback can cause subtle stale closure bugs in animation-heavy components — useRef is safer for callback references that change across renders

What's next for MindMate - Your AI Mental Wellness Companion

  • Multi-language Support — Arabic and other language interfaces to reach broader audiences
  • Therapist Matching — Connect users with licensed therapists based on their mood analytics and assessment results
  • Community Features — Anonymous peer support groups moderated by AI for shared experiences
  • Wearable Integration — Connect with Apple Watch and Fitbit for biometric mood correlation (heart rate variability, sleep data)
  • Export to PDF — Generate clinical-ready mood reports that users can share with their therapists
  • Voice Conversations — Reintroduce voice interaction with improved speech-to-text and emotion detection
  • Offline Mode — Service worker support for breathing exercises and journaling without internet

Built With

Share this project:

Updates