Sukoon - Wellness that listens to You

A comprehensive mental wellness platform offering 9 diverse, evidence-based therapy approaches, all free, accessible 24/7, and designed to make mental health support available to everyone, everywhere.

Comment

💡 Inspiration

Mental health challenges affect 1 in 4 people annually, yet accessible support remains scarce. Traditional therapy is often expensive, intimidating, or geographically limited. During the pandemic, these issues intensified while resources stayed constrained.

Sukoon (meaning "peace" in Urdu/Hindi) was born from a simple question: "What if finding peace of mind was just a click away?"

We envisioned a digital sanctuary combining ancient healing practices (yoga, meditation) with modern therapeutic approaches (audio therapy, bibliotherapy), making mental wellness accessible to everyone, everywhere—completely free.

🎯 What It Does

Sukoon is a comprehensive mental wellness platform offering 9 evidence-based therapy approaches:

  1. Audio Therapy - Curated audiobooks and guided meditations
  2. Reading Therapy - Motivational quotes and book recommendations
  3. Yoga Therapy - Detailed asanas with visual guides
  4. Child Therapy - Heartwarming content triggering endorphins
  5. Spiritual Therapy - Meditation practices and wellness events
  6. Talking Therapy - Educational content on mental health
  7. Laughing Therapy - Comedy videos for natural mood boost
  8. Special Therapy - Targeted wellness strategies
  9. Doctor Consultation - Practo integration for professional help

Key Features:

  • 100% free with 24/7 availability
  • 6 mood-based themes (Calm, Focus, Energize, Night, Serenity, Sunset)
  • Responsive design across all devices
  • Smooth scroll-based navigation
  • Comprehensive FAQ and contact support

🛠️ How We Built It

Tech Stack:

  • Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS, Framer Motion
  • Forms: React Hook Form, Zod validation
  • Design: Custom theme system, glass morphism, responsive layouts
  • Optimization: Dynamic imports, lazy loading, image optimization, code splitting

Development Process:

  1. Research & planning (evidence-based approaches, user needs)
  2. Core development (Next.js setup, theme system, component library)
  3. Feature implementation (9 therapy pages, external integrations)
  4. Design refinement (animations, mobile optimization)
  5. Testing & optimization (performance, accessibility, cross-browser)

🚧 Challenges We Ran Into

  1. Theme System - Solved with CSS variables and React Context API
  2. Hydration Errors - Fixed using mounted state and proper SSR handling
  3. Image Optimization - Implemented Next.js Image with lazy loading
  4. Scroll Navigation - Used Intersection Observer API with debouncing
  5. Responsive Design - Mobile-first approach with Tailwind breakpoints
  6. Content Organization - TypeScript interfaces and centralized data management
  7. External Resources - Lazy-loaded components with security measures
  8. Accessibility - WCAG compliance with semantic HTML and ARIA labels

🏆 Accomplishments That We're Proud Of

  • Comprehensive ecosystem with 9 diverse, research-backed therapy approaches
  • Professional UI/UX with glass morphism, smooth animations, and calming design
  • Technical excellence - 100% TypeScript, optimized performance, accessibility-first
  • Innovative theme system allowing mood-based customization
  • Real-world integration with Practo for professional consultations
  • Completely free with no paywalls or subscriptions
  • Community focus featuring global wellness events
  • Scalable architecture built with Next.js 14 best practices
  • Attention to detail in every component and interaction

📚 What We Learned

Technical:

  • Next.js 14 App Router, server vs client components
  • Advanced TypeScript patterns and type safety
  • Performance optimization strategies (lazy loading, code splitting)
  • Framer Motion animations and scroll-based interactions
  • WCAG accessibility guidelines

Design:

  • Color psychology and its impact on mood
  • User-centric, iterative design process
  • Mobile-first responsive strategies

Domain:

  • Evidence-based therapy approaches
  • Mental health barriers and stigma reduction
  • Content curation for engagement and helpfulness

Soft Skills:

  • Complex problem-solving and debugging
  • Time management and feature prioritization
  • Quality assurance and user experience refinement

Built With

Share this project:

Updates