MindGarden – Gamified Mental Health Companion

It’s fun, private, and impactful — encouraging people to care for their mental well-being while making self-care feel like a game. Perfect for communities, students, etc

Comment

🔹 Inspiration

Mental health is often overlooked because people hesitate to track or express how they feel. We wanted to create a fun, stigma-free way for anyone to check in with their emotions. Inspired by virtual pet games and the idea of "nurturing growth," we built MindGarden — where taking care of your mind helps your plant grow 🌷.

🔹 What We Learned

How to use gamification psychology to make self-care engaging.

Building responsive UI with HTML, CSS, and JavaScript.

Integrating YouTube videos, music, and animations to make stress relief interactive.

Using localStorage for simple, private, and secure user history without a backend.

How important small design choices are in creating a calming user experience.

🔹 How We Built It

Frontend: We designed a single-page application with HTML5, CSS3, and vanilla JavaScript.

Gamification: A plant emoji 🌱 grows and changes based on user mood.

Multimedia: Embedded YouTube videos for mood-based relaxation and included background relaxing audio.

Tracking: Used browser localStorage to save mood history and notes.

Features: Added motivational quotes, breathing exercises 🌬️, and stress-relief resources.

🔹 Challenges We Faced

Ensuring animations and multimedia work seamlessly across browsers.

Handling invalid React/framer-motion conflicts (we later pivoted to a simpler HTML/JS solution for hackathon speed).

Balancing simplicity vs. features — making the app light but still impactful.

Designing a calm, minimal, non-overwhelming interface for users under stress.

Built With

Share this project:

Updates