Inspiration

The idea came through when i noticed the large number of people battling depression, anxiety and many other different mind issues. Teenagers are a large number of this statistic and also the most ignorant ones. So the solution was simple , give them something easy to use and user friendly to at least monitor this issue

What it does

MindEase is a progressive web application designed to support daily mental well-being through an intuitive, guided journey. It helps users become more aware of their emotional patterns and provides immediate, actionable tools to manage stress and overthinking.

Key functionalities: Mood Tracking with 6 expressive options and personalized tips Daily Reflections to encourage gratitude and self-awareness Interactive 4-7-8 Breathing Exercise with visual guidance, audio cues, and progress tracking Personalized Wellness Guide that delivers tailored suggestions (activities, meditations, affirmations) based on the user's current mood, age, and gender For moods associated with overthinking (anxious, stressed, sad), it recommends a 45-minute unwind session with curated calming music playlists and uplifting short-form content links (Spotify, YouTube, TikTok, Facebook) Gamification elements: Daily streaks, badges (Mood Tracker, Reflector, Breath Master, Wellness Explorer), confetti celebrations for positive moods, and a beautiful mood trend chart All data is securely stored locally in the browser, requiring no server or account creation beyond a simple name/password for persistence

The app gently guides users through one step at a time, reducing overwhelm and building healthy habits progressively

How we built it

MindEase is a pure client-side web application built with:HTML5, CSS3 (custom design with gradients, animations, and responsive layout) Vanilla JavaScript (no frameworks) for full control and lightweight performance localStorage for persistent, private data storage across sessions Canvas API for mood trend visualization and confetti effects Web Audio API for subtle breathing guidance beeps Font Awesome for icons and Google Fonts (Inter) for modern typography

Everything runs entirely in the browser , no backend, no external dependencies beyond CDNs for fonts/icons, making it instantly deployable and privacy-focused.

Challenges we ran into

Ensuring the breathing exercise animation and timing were perfectly synchronized across devices and browsers Implementing gamification (streaks, badges) while keeping logic simple and storage-efficient Creating dynamic, mood-aware media recommendations without external APIs Balancing feature richness with performance on lower-end devices Designing a calming yet engaging UI that feels therapeutic rather than overwhelming

Accomplishments that we're proud of

  • A truly delightful user experience with confetti celebrations, badge pop animations, and a pulsing breathing circle that feels alive. -Smart personalization: suggestions adapt not just to mood but also age and gender for more relevant recommendations. -Innovative "45-minute unwind" feature that intelligently links to real calming playlists and positive reels to combat overthinking. -Seamless progressive flow that guides users gently while tracking completion with a progress bar Full data privacy . everything stays on the user's device. Beautiful, responsive design that works perfectly on mobile and desktop.

What we learned

The power of small gamification elements (streaks, badges, confetti) in encouraging consistent mental health practice. How crucial visual feedback and smooth animations are for creating a calming, therapeutic digital experience. The importance of progressive disclosure in mental health apps – showing one thing at a time reduces anxiety How to implement sophisticated interactions (breathing timer, canvas charts, audio cues) with pure vanilla JavaScript That users deeply appreciate when an app "remembers" them and provides truly personalized guidance

What's next for Mind Ease

Progress Insights Dashboard: Weekly/monthly reports showing mood patterns and correlations with reflections Custom Habit Builder: Let users create their own wellness routines Community Features: Anonymous sharing of positive reflections to inspire others Dark Mode and more theme options Offline PWA Installation support with manifest and service worker Integration with wearables for passive mood inference (heart rate variability) Multilingual support to reach more users globally Evidence-based content partnerships with mental health organizations

MindEase started as a hackathon project but has the potential to become a daily companion for millions seeking better mental well-being . one breath, one reflection, one positive moment at a time.

Share this project:

Updates