ManoDarpan-The AI integrated mental wellness web application

🌟 Inspiration With rising mental health concerns and limited access to support systems, we were inspired to build ManoDarpan, a digital wellness companion that offers private, accessible, and AI-powered emotional support. Our goal was to create a safe space where users could track their mood, manage mental wellness, and reach out in times of crisis — all in one place.

💡 What it does ManoDarpan is an interactive mental wellness web app that features: AI-powered mood tracking & sentiment analysis SOS crisis intervention with trusted contact alerts Journaling prompts tailored to emotions Voice-to-text journaling using Web Speech API Mood-based insights and visual progress tracking A wellness toolkit with guided meditation & self-care activities

🛠️ How we built it We used: React + TypeScript for a modular, type-safe frontend Tailwind CSS & shadcn/ui for responsive and accessible design Recharts for emotion-driven data visualization Framer Motion for animations Web Speech API for voice input localStorage for offline data persistence

Component-driven architecture with custom hooks and utility functions for state management and functionality.

🚧 Challenges we ran into Implementing voice input accessibility across browsers Managing component state across multiple features Creating a balance between responsiveness and animation performance Ensuring persistent localStorage data handling for privacy

🏆 Accomplishments that we're proud of Seamless integration of real-time AI mood analysis A fully functional, privacy-focused SOS system Aesthetically pleasing, accessible UI with strong UX Built a usable MVP with real-world applicability during the hackathon timeframe

📚 What we learned Deepened our understanding of TypeScript with React Improved UI/UX design practices using Tailwind and shadcn/ui Gained hands-on experience with voice APIs, charting libraries, and managing app-wide state Learned how to empathize with end-users and build solutions around their mental health needs

🚀 What's next for ManoDarpan – The AI-integrated Mental Wellness Web Application Integrating a real-time backend for cloud-based data syncing Adding professional support linkage and chatbot fine-tuning Mobile-first optimization and PWA deployment Expanding emotion detection capabilities with deeper NLP techniques Community features for shared wellness goals and motivation

Built With

• framer-motion
• react
• recharts
• shadcn/ui
• tailwind-css
• typescript
• web-speech-api