๐ฟ 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
- css
- database:
- html
- supabase
- tailwind-css
- technologies-:-reactjs
- typescript
- vite
Log in or sign up for Devpost to join the conversation.