Wellness Champion

Many people struggle with mental health but don't seek help until it's critical. Wellness Companion changes that. Through daily, judgment-free check-ins and An expert motivated chatbot.

Comment

Inspiration

The gap between occasional therapy and daily mental health support is vast and dangerous. Many people struggle silently, only reaching out when they're in crisis. We envisioned a compassionate digital companion that meets users where they are—daily, without judgment, and without the clinical barriers of traditional therapy.

What it does

Wellness Companion is a full-stack mental health check-in platform that combines daily tracking, AI-powered insights, and early intervention support. Core Features:

  1. 📝 Daily Wellness Check-In

Simple mood tracking (0-5 scale with emojis) Guided journaling prompts that encourage reflection Non-clinical, conversational language Takes less than 5 minutes

  1. 📊 Pattern Detection & Insights

Tracks mood trends over 7-14 day periods Detects concerning downward trends automatically Generates personalized insights about emotional patterns Alerts users BEFORE issues escalate (early intervention)

  1. 💡 Personalized Coping Strategies

Context-aware suggestions based on current mood Breathing exercises, gratitude practices, movement ideas Evidence-based wellness techniques Different strategies for different mood levels

  1. 🔗 Smart Resource Recommendations

Crisis hotlines (Crisis Text Line, 988, international resources) Mindfulness & self-help articles Professional therapy resources Curated based on user's current emotional state

  1. 🔒 Privacy-First Design

End-to-end encrypted data storage User controls all sharing (optional trusted contacts) No forced data collection GDPR-compliant architecture

  1. 🔔 Gentle Reminders

Non-intrusive notification system Customizable reminder frequency Encouraging (not pushy) language Respects user autonomy

How we built it

Frontend Architecture Tech Stack: Next.js 14 + React 18 + Tailwind CSS + Lucide React Components Built:

AuthApp.jsx - Complete authentication system (Sign Up/Sign In) WellnessApp.jsx - Daily check-in interface with mood selector Dashboard.jsx - Mood history and pattern visualization ResourcesPage.jsx - Curated wellness resources StatsPage.jsx - Personal wellness insights

Features:

Server-side rendering safe (no localStorage errors) Beautiful gradient UI with compassionate design language Responsive design (mobile-first) Real-time form validation Smooth state management with React hooks

Backend Architecture Tech Stack: FastAPI + SQLAlchemy + SQLite + JWT + bcrypt API Endpoints: AUTH ROUTES: POST /auth/register - User registration with password hashing POST /auth/login - JWT token generation GET /auth/me - Current user info

WELLNESS ROUTES (Protected): POST /wellness/checkins - Create new check-in GET /wellness/checkins - Get user's check-in history GET /wellness/checkins/:id - Get specific check-in DELETE /wellness/checkins/:id - Delete check-in GET /wellness/stats - Get mood statistics & trends

HEALTH: GET /health - Server status GET / - API info Security Features:

Password hashing with bcrypt JWT tokens with 30-minute expiration CORS properly configured Input validation with Pydantic SQL injection prevention via ORM User data isolation (each user sees only their data)

Database Design SQLite with scalability to PostgreSQL Tables: users:

  • id (primary key)
  • email (unique)
  • hashed_password
  • created_at
  • is_active

check_ins:

  • id (primary key)
  • user_id (foreign key)
  • mood (0-5)
  • journal (text)
  • date (with index for fast querying) Development Workflow

Frontend-First: Built React components with Tailwind before backend API-Driven: Designed API endpoints following REST principles Test-Driven: Tested endpoints using FastAPI's interactive docs (/docs) Integrated: Connected frontend to backend with proper error handling Deployment-Ready: Used environment variables for configuration

Challenges we ran into

  1. localStorage is not defined (SSR Issue) Problem: Next.js server-side rendering tried to access localStorage before client hydration Solution:

Wrapped localStorage access with typeof window !== 'undefined' checks Used useEffect hook to safely access browser APIs Added mounted state to prevent hydration mismatch

javascriptuseEffect(() => { setMounted(true); const savedToken = typeof window !== 'undefined' ? localStorage.getItem('token') : null; setToken(savedToken); }, []);

  1. CORS Errors - Frontend Can't Reach Backend Problem: "Failed to fetch" errors when frontend tried to call backend Solution:

Added comprehensive CORS middleware to FastAPI Allowed multiple localhost ports (3000, 3001, 5173, 8080) Created .env.local with NEXT_PUBLIC_API_URL Added console logging to debug API calls

pythonapp.add_middleware( CORSMiddleware, allow_origins=[ "http://localhost:3000", "http://localhost:5173", "http://127.0.0.1:3000", "http://127.0.0.1:5173", ], allow_credentials=True, allow_methods=[""], allow_headers=[""], )

  1. JWT Token Validation & Authorization Problem: Validating tokens from Authorization headers and protecting routes Solution:

Implemented custom dependency injection with Depends(get_current_user) Proper Bearer token parsing Detailed error messages for debugging

pythondef get_current_user( authorization: Optional[str] = Header(None), db: Session = Depends(get_db) ) -> UserDB: # Extract, validate, and return authenticated user

  1. Password Security Problem: How to securely store and verify passwords Solution:

Used bcrypt for password hashing (one-way algorithm) Added password validation (min 8 characters) Never store or return plain passwords

  1. Mood Pattern Detection Algorithm Problem: How to detect trends without being overly alarmist Solution:

Compare last 7 days with previous 7 days Only show alert if clear downward trend Include helpful coping strategies, not just warnings

pythonif len(checkins) >= 7: recent_avg = sum(c.mood for c in checkins[:7]) / 7 older_avg = sum(c.mood for c in checkins[7:14]) / 7 trend = "up" if recent_avg > older_avg else "down"

  1. User Experience with Sensitive Data Problem: Making mental health tracking feel safe, not clinical Solution:

Used warm, compassionate language Removed technical jargon Added encouraging emojis and supportive messages Made interface beautiful and inviting (not sterile)

Accomplishments that we're proud of

✅ Full-Stack Implementation

Complete working application from database to frontend Authentication system that's both secure and user-friendly Real database persistence with user data isolation

✅ Production-Ready Code

Proper error handling and validation Environment variable configuration CORS security properly configured SQL injection prevention Password security best practices

✅ Compassionate Design

Non-clinical, judgment-free language Beautiful UI that encourages daily use Emotional intelligence in the interface Resources that actually help, not just generic links

✅ Smart Features

Automatic trend detection Personalized coping strategies based on mood Privacy controls built-in from day one Gentle, non-intrusive approach to mental health

✅ Proper Project Structure

Organized frontend and backend separation RESTful API design Database models with relationships Git-ready with .gitignore for sensitive files

✅ Hackathon Delivery

Built, tested, and deployed in limited time All features working (registration, login, check-ins, trends, resources) Includes comprehensive documentation Ready for scaling to production

What we learned

  1. Mental Health Tech Requires Different Thinking

Users need compassion, not just features Language matters (emoji > clinical terms) Privacy isn't a feature, it's a requirement Early intervention > crisis response

  1. Full-Stack Development Skills

Frontend: Next.js SSR challenges, React state management Backend: FastAPI's powerful dependency injection, database design Integration: CORS, authentication flows, API design DevOps: Environment management, debugging techniques

  1. User-Centered Design

A beautiful interface encourages daily habit formation Removing friction increases adoption Personalization creates engagement Psychological safety enables honesty

  1. Security Matters from Day One

Password hashing with bcrypt (not SHA or MD5) JWT token management and expiration User data isolation is critical CORS misconfiguration is a common vulnerability

  1. Debugging is an Art

Console logging is your best friend Network tab reveals connection issues Testing endpoints in /docs saves hours SSR bugs require different thinking than traditional React

  1. API Design Principles

Consistent endpoint naming (RESTful) Proper HTTP status codes (201 for creation, 401 for auth, etc.) Meaningful error messages for debugging Dependency injection reduces bugs

  1. The Importance of Documentation

Code comments save future you README files are essential Setup guides prevent installation pain Error messages should be helpful, not cryptic

What's next for Wellness Champion

Phase 2: AI Enhancement (Next Sprint)

Claude API Integration: Generate personalized insights from journal entries Smart Coping Strategies: AI suggests strategies based on user's journal analysis Mood Prediction: Predict difficult days based on patterns Sentiment Analysis: Understand emotional depth beyond mood numbers

Phase 3: Community & Support

Support Groups: Connect users with similar struggles (anonymously) Peer Wisdom: Share successful coping strategies (optional) Expert Integration: Connect with licensed therapists Crisis Prevention: Real-time alerts to trusted contacts (with permission)

Phase 4: Mobile App

Native iOS/Android: React Native implementation Push Notifications: Gentle, timely reminders Offline Support: Work without internet Wearable Integration: Track heart rate, sleep patterns

Phase 5: Data & Insights

Advanced Analytics: Identify triggers and patterns Export Data: Give users their data (GDPR compliant) Research Participation: Anonymized data for mental health research Predictive Wellness Scores: Personalized risk assessments

Phase 6: Deployment & Scaling

Production Deployment:

Frontend: Vercel or Netlify Backend: Railway, Render, or AWS Database: PostgreSQL for scalability CDN: Cloudflare for performance

Monetization (Freemium Model):

Free: Basic check-ins, mood tracking, resources Premium: AI insights, therapy matching, crisis alerts Organization: Enterprise mental health programs

Phase 7: Impact Measurement

Research Partnerships: Universities studying mental health Success Metrics: Track user outcomes Public Health Integration: Partner with healthcare systems Open Source: Release core as open source for mental health community

Immediate Next Steps

User Testing: Get feedback from real users Accessibility: WCAG compliance (dark mode, screen readers) Performance: Optimize database queries, CDN integration Legal: Privacy policy, terms of service, liability review Marketing: Build community around wellness Sustainability: Find funding (grants, investors, donations)

Built With

Share this project:

Updates