Nomize/mindmate-africa-support

MindMate is a responsive web application designed to provide mental health support through a compassionate chatbot interface, curated educational resources, and subscription-based premium features. The application targets African users (Nigeria, Kenya, Uganda, Tanzania) and is optimized for mobile-first usage. MindMate — Mental Health First Aider Chatbot App MindMate is a responsive web application designed to provide mental health support through a compassionate chatbot interface, curated educational resources, and subscription-based premium features. The application targets African users (Nigeria, Kenya, Uganda, Tanzania) and is optimized for mobile-first usage. Table of Contents App Overview Frontend Features Backend Architecture Chatbot Intelligent Response System Payment Integration (InstaSend) Core Functionality & Flow Resources Section Authentication & Security Real-time Features Technical Requirements Implementation Phase Environment Variables Current State & Limitations App Overview Name: MindMate Purpose: Mental health first aid chatbot with subscription-based premium features Target Users: African users seeking mental health support (Nigeria, Kenya, Uganda, Tanzania) Tech Stack: React frontend + Supabase backend + InstaSend payments Frontend Features Navigation Structure Home: Landing page with app introduction Chat: Main chatbot interface (login required) Resources: Mental health resources and educational content Design & Styling African-Friendly Calming Palette: Primary: Soft blues (#6B73FF, #E8F4FD) Secondary: Gentle greens (#7ED4AD, #F0FAF7) Neutrals: Light grays (#F8F9FA, #E9ECEF) Text: Dark gray (#2C3E50) and white Accent: Warm coral (#FF8A65) for CTA buttons Visual Elements: Lucide React icons throughout Mobile-first responsive design Rounded corners and subtle shadows Touch-friendly interface elements Optimized for low-bandwidth connections Chat Interface Scrollable chat window with clear distinction between user and bot messages User messages: right-aligned, light background Bot messages: left-aligned, slightly darker background Timestamps and auto-scroll to latest messages Typing indicator for bot responses Message history persistence across sessions Input Section Text input box: "Type your message here... …