MindFirst - Mental Wellness Companion

Overview

MindFirst is a mental wellness web application that provides:

• Empathetic AI Chat - Talk to a calm, supportive AI assistant
• Crisis Detection - Automatic detection of crisis keywords with immediate helpline access
• Daily Mood Check-ins - Track your emotional patterns with 5 mood options
• Mood History - Visual history of your last 7 check-ins
• Mindfulness Exercises - 4 offline-capable exercises for immediate relief

Features

0. Welcome Page

• Beautiful Landing Page - Calming introduction with pastel gradient background
• Split-Screen Design - Welcome content on left, sign-in form on right (stacked on mobile)
• Zen Aesthetic - Meditation stones image and peaceful messaging
• Social Sign-in Options - Continue with Apple and Google buttons
• Email Sign-in - Email input field with primary action button
• Session Management - Shows once per session, skips on subsequent visits
• Responsive Layout - Adapts beautifully to all screen sizes

1. Chat Interface

• Interactive LLM Integration - Powered by Gemini 2.5 Flash for natural, empathetic conversations
• Speech-to-Text Input - Click microphone button to speak your message instead of typing
• Text-to-Speech Output - Click speaker button on AI messages to hear responses read aloud
• Real-time AI responses using empathetic language
• Crisis keyword detection (suicide, self-harm, etc.)
• Automatic display of 988 Suicide & Crisis Lifeline
• Offline status indicator
• Message history with timestamps

Voice Features:

• Microphone Button: Record voice messages (up to 60 seconds)
• Real-time Transcription: See your words appear as you speak
• Speaker Button: Hear AI responses with calm, neutral voice
• Visual Feedback: Pulsing red indicator during recording, animated sound wave during playback
• Browser Support: Uses Web Speech API (Chrome, Edge, Safari 14.1+)
• Graceful Degradation: Voice buttons hidden if browser doesn't support speech features

2. Daily Check-in

• 5 emoji mood options: 😊 😐 😕 😔 😫
• Optional note field (500 character limit)
• Saves to Supabase database
• Anonymous tracking via session ID

3. Mood History

• Last 7 check-ins displayed as color-coded cards
• Green (great), Yellow (okay), Orange (meh/low), Red (struggling)
• Shows date and note preview
• Responsive grid layout

4. Mindfulness Exercises

Box Breathing

• Animated circle with 4-second cycles
• 5 complete cycles (80 seconds)
• Visual phase indicators

5-4-3-2-1 Grounding

• Interactive checklist
• 5 senses categories
• Progress tracking
• Completion celebration

Soothing Sounds

• Interactive checklist
• 4 audio track options:
  • Calm Ambient - Peaceful ambient sounds
  • Beloved - Calm, gentle melody
  • Lovely Long Version - Soothing extended track
  • Precious Memories - Peaceful ambient sound
• Audio selection cards with visual indicators
• Play/pause button
• Volume slider
• Loop toggle
• Background playback support
• Seamless track switching

Self-Compassion

• 8 rotating compassionate phrases
• Fade-in animations
• Progress dots
• User-paced navigation

Built With

• gemini
• mycaption-speech-to-text
• superbase