CareMate is a persona-driven virtual health assistant that provides personalized health tracking, recommendations, and clinical summaries tailored to different user demographics and health needs. Built with accessibility, bilingual support, and clinical accuracy at its core.
🌟 Overview CareMate adapts its interface, language, and features based on three distinct user personas, each with unique health management needs: 👴 André Lavoie (72, Type 2 Diabetes)
Focus: Chronic disease management Language: French/English toggle Features: Blood glucose tracking, medication reminders, clinical summaries for doctor visits Design: Senior-friendly with large touch targets and clear typography
👩 Ruby Chen (34, No Family Doctor)
Focus: Preventive wellness & stress management Language: English Features: Stress tracking, interactive breathing exercises (4-7-8 technique), sleep optimization Design: Modern, empowering, professional
👦 Leo Martinez (16, Student Wellness)
Focus: Mental health, sleep hygiene, and productivity Language: English Features: Pomodoro timer for studying, mood tracking, screen time monitoring Design: Casual, gamified, teen-friendly
✨ Key Features 📊 Personalized Dashboards
Real-time health metrics with trend indicators (↑ ↓ →) Color-coded status alerts (normal, warning, critical) Persona-specific recommendations 30-day trend visualization
🎯 Interactive Tools
Breathing Exercise: Guided 4-7-8 breathing technique with visual animation Pomodoro Timer: 25/5/15 minute study sessions with completion tracking Data Logging: Easy-to-use health data entry forms Clinical Summaries: Exportable reports for healthcare providers
🌍 Bilingual Support
Full English/French localization for André's screens Persistent language toggle with flag indicators (🇬🇧 🇫🇷) Localized date formats and terminology
♿ Accessibility First
WCAG AA compliant color contrast Minimum 44px touch targets Full keyboard navigation support Semantic HTML with ARIA labels Screen reader optimized Senior-friendly typography (larger text for André)
📱 Mobile-Optimized
Responsive layouts (375px-428px screens) Fixed bottom navigation Touch-friendly interactions Progressive disclosure for complex features
🛠️ Tech Stack CategoryTechnologyFrameworkReact 18+ with TypeScriptStylingTailwind CSS v4.0UI ComponentsCustom components + ShadCN UIIconsLucide ReactFontsInter (Google Fonts)State ManagementReact HooksBuild ToolVite
🚀 Getting Started Prerequisites
Node.js 18+ and npm/yarn Modern web browser
Installation bash# Clone the repository git clone cd caremate
npm install
npm run dev
The application will be available at http://localhost:5173
npm run build
