Inspiration Mental health is often treated reactively instead of proactively, and stigma still prevents many from seeking help. We wanted to create a space that feels safe, engaging, and rewarding — a place where emotional well-being can grow naturally, just like a garden. The metaphor of planting seeds and watching them bloom felt like the perfect way to represent daily self-care and resilience.
What it does SafeGarden is an interactive mental wellness platform that transforms self-care into a living experience. Key features:
🌱 Mood Garden — Log your emotions daily and grow a unique virtual garden.
💬 Stigma Wall — Share and read anonymous messages of encouragement to reduce stigma.
📓 Mind Journal — Write private reflections and track emotional growth over time.
📦 HopeBox — Store uplifting quotes, photos, and memories to revisit on tough days.
🎵 Mindful Music Garden — Listen to calming music that visually animates your plants.
🆘 SOS Mode — Discreetly reach out to trusted contacts in an emergency.
🌬 Breathing Visualizer — Guided animated breathing exercises for instant calm.
📊 AI Mood Insights — Get trends and suggestions based on your logged moods.
How we built it We built SafeGarden using:
HTML5, CSS3, JavaScript for a responsive, interactive front-end.
LocalStorage to keep user data private on their device (no accounts needed).
CSS animations & gradients for a calming, app-like experience.
JavaScript Canvas & Chart.js for mood visualizations.
Custom demo dataset for hackathon presentation without requiring manual input.
Challenges we ran into Designing a calming yet feature-rich UI that doesn’t overwhelm the user.
Balancing privacy with interactivity — we wanted no sign-in, but still persistence.
Implementing smooth animations while keeping performance light for low-end devices.
Creating test data that looks authentic for judging without manual setup.
Accomplishments that we're proud of Building a feature-packed yet calming platform in a short time.
Designing unique mental health tools (HopeBox, Stigma Wall, Mood Garden) that competitors rarely combine.
Creating a hackathon-ready demo mode with preloaded data for smooth judging.
Keeping the platform 100% offline & private — no user data leaves their device.
What we learned The importance of design psychology — color palettes, shapes, and animations directly affect emotional response.
How to implement mental health features creatively without making the experience clinical or intimidating.
Ways to simulate real usage for a compelling hackathon demo.
What's next for SafeGarden Adding AI-powered mood forecasting and personalized self-care suggestions.
Expanding the HopeBox into a collaborative feature where friends can send each other encouragement.
Mobile app version with offline-first design and optional encrypted cloud sync.
Integrating guided therapy exercises in the form of mini interactive stories.
Log in or sign up for Devpost to join the conversation.