MindWell

Inspiration

Mental health is something deeply personal to me. I’ve seen friends and loved ones struggle silently, often without tools or safe spaces to understand and improve their wellbeing. I wanted to build something that feels supportive, modern, and beautiful an app that empowers people to check in with themselves, track their progress, and feel encouraged to seek help if needed.

What it does

MindWell offers a comprehensive 20-question assessment covering anxiety, depression, stress, and overall wellbeing. Users receive personalized results and recommendations, can track their progress over time through interactive charts, and set personal mental wellness goals. The app combines professional-grade UI/UX design with privacy-first data handling all data stays local, giving users complete control.

How we built it

We built MindWell using React and TypeScript for a solid, scalable frontend foundation. Tailwind CSS and Framer Motion helped us create smooth animations and a premium aesthetic that feels inviting and safe. For data visualization, we used Recharts to display progress trends, category-specific analysis, and overall scoring. The app uses React context to securely store data locally, ensuring privacy without needing a backend.

Challenges we ran into

Designing a mental health app meant walking a fine line between being engaging and being sensitive. We iterated on the UI several times to make sure it felt friendly without trivializing serious topics. Another big challenge was building accessible, responsive data visualizations that worked well across devices and screen sizes. Lastly, prioritizing privacy without a backend required creative state management and careful architecture choices.

Accomplishments that we're proud of

We’re proud of creating a fully functional, beautifully designed mental health tool that feels safe and empowering. Seeing the smooth animations come to life and the interactive charts work seamlessly was incredibly rewarding. Most importantly, we’re proud of building something that can genuinely help people reflect on and improve their mental health journey.

What we learned

We learned the importance of empathetic design when dealing with sensitive topics. Technically, we gained deeper expertise in advanced React patterns, animation design with Framer Motion, and building accessible, mobile-friendly visualizations. We also learned how to balance strong aesthetics with usability and performance.

What's next for MindWell

We plan to integrate Supabase for optional user accounts and cloud-based data storage, so users can access their progress from any device if they choose. We’re also exploring subscription-based features, like guided meditations and AI-driven personalized mental health tips. In the future, we hope to partner with professional mental health services to connect users to real help when they need it most.

Built With

• css
• react
• tailwind
• typescript