๐ŸŒฟ AI-Driven Mental Health Companion with Mood-Based Therapy

๐Ÿ’ก Inspiration

Mental health is a growing concern in todayโ€™s fast-paced digital world, especially among students and young professionals. Many people hesitate to open up or seek help due to stigma, lack of access, or time constraints. We were inspired to create a private, AI-powered wellness companion that supports emotional well-being through interactive features like mood tracking, journaling, breathing exercises, and music therapyโ€”accessible anytime, anywhere.


๐Ÿค– What It Does

Our AI-powered mental health app provides a personalized therapeutic experience based on users' moods. Key functionalities include:

  • ๐Ÿง  AI Chat for Emotional Support Provides empathetic conversations using generative AI.

  • ๐Ÿ““ Mood Journal Lets users track their emotions daily and reflect on their feelings.

  • ๐ŸŽต Mood-Based Music Therapy Plays relaxing or uplifting music based on mood input.

  • ๐Ÿง˜ Breathing & Meditation Exercises Calming animations to reduce anxiety and stress.

  • ๐ŸŒž Daily Affirmations Delivers motivational quotes tailored to users' emotional state.

  • ๐ŸŒ— Light/Dark Mode Enhances comfort with theme toggling.


๐Ÿ› ๏ธ How We Built It

  • Frontend: React.js + Tailwind CSS for a clean, mobile-responsive UI.
  • Animations: Framer Motion for smooth transitions and guided breathing visuals.
  • AI Integration: Gemini or OpenAI APIs to power contextual conversation and affirmations.
  • Audio Playback: HTML5 Audio + React hooks for mood-based music control.
  • Storage: Local Storage used to preserve journal entries and session data without needing user login.
  • Deployment: Hosted on Netlify for fast, free access.

๐Ÿšง Challenges We Ran Into

  • ๐ŸŽฏ Mapping mood inputs to appropriate content (music, affirmations, etc.) required careful logic and UX planning.
  • ๐Ÿงฉ Integrating AI chat safely with emotionally sensitive prompts.
  • ๐ŸŽง CORS restrictions while streaming external audio files.
  • ๐Ÿ“ฑ Creating a seamless, intuitive mobile experience on various screen sizes.
  • ๐Ÿงช Managing React state between multiple components without overcomplicating the structure.

๐Ÿ† Accomplishments That We're Proud Of

  • Built a fully functional, polished AI wellness app in a short time frame.
  • Designed a smooth, non-intrusive experience for users seeking mental relief.
  • Successfully integrated multiple mental wellness tools into one cohesive platform.
  • Prioritized user privacy with no account requirement or cloud-based data sharing.

๐Ÿ“š What We Learned

  • React component lifecycle and advanced state handling.
  • How to build emotionally aware AI tools using generative models responsibly.
  • Tailwind CSS for rapid and responsive UI development.
  • Designing inclusive user experiences for mental health applications.
  • Overcoming technical issues like audio playback permissions and CORS headers.

๐Ÿš€ What's Next for AI-Driven Mental Health Companion with Mood-Based Therapy

  • ๐Ÿง‘โ€โš•๏ธ Partnering with therapists to validate and improve AI responses.
  • ๐Ÿ“ฑ Building a Progressive Web App (PWA) for offline support and mobile installation.
  • ๐Ÿ“Š Adding visual mood tracking graphs and dashboards.
  • ๐Ÿ”’ Incorporating encrypted cloud storage for user journals (opt-in).
  • ๐ŸŽฏ Personalized routines and reminders based on user behavior and wellness goals.

Built With

Share this project:

Updates