💊 MedGuide - Intelligent Medication Tracker

<div align="center">

🚀 An intelligent, accessible medication tracking solution

🌐 Live Demo

</div>

---

🎬 Animated Program Flow

User Journey Visualization

┌─────────────────────────────────────────────────────────────────────────────┐
│                                                                             │
│  📱 APPLICATION STARTUP                                                     │
│      ↓                                                                       │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │ App initializes Vite + React                                         │  │
│  │ Loads Tailwind CSS & Framer Motion                                   │  │
│  │ Initializes Supabase & JWT Authentication                           │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
│      ↓                                                                       │
│  ⚡ CHECK USER SESSION                                                      │
│  /  \                                                                        │
│ /    \                                                                       │
│No    Yes → Redirect to Dashboard                                           │
│↓                                                                             │
│┌──────────────────────────────────────────────────────────────────────────┐ │
││ 🔑 AUTHENTICATION FLOW                                                   │ │
│├──────────────────────────────────────────────────────────────────────────┤ │
││                                                                          │ │
││  USER LANDS ON LOGIN PAGE                                              │ │
││          ↓                                                             │ │
││  ┌──────────────────┐      ┌──────────────────┐                       │ │
││  │ Login Option     │      │ Register Option  │                       │ │
││  └────────┬─────────┘      └────────┬─────────┘                       │ │
││           ↓                         ↓                                  │ │
││  ┌────────────────────┐  ┌────────────────────┐                       │ │
││  │ Enter Credentials  │  │ Create New Account │                       │ │
││  │ • Email            │  │ • Email            │                       │ │
││  │ • Password         │  │ • Password         │                       │ │
││  │                    │  │ • Confirm Password │                       │ │
││  └────────┬───────────┘  └────────┬───────────┘                       │ │
││           ↓                         ↓                                  │ │
││  Send to Backend ──────────► JWT Authentication                       │ │
││           ↓                         ↓                                  │ │
││  ✅ Login Success ◄─────────── ✅ Account Created                      │ │
││           ↓                         ↓                                  │ │
│└────────┬──────────────────────────┬─────────────────────────────────────┘ │
│         └──────────────┬───────────┘                                        │
│                        ↓                                                    │
│  ┌──────────────────────────────────────────────────────────────────────┐  │
│  │ 🏠 DASHBOARD - MAIN APPLICATION HUB                                 │  │
│  ├──────────────────────────────────────────────────────────────────────┤  │
│  │                                                                      │  │
│  │  Store JWT Token (localStorage)                                    │  │
│  │  Load User Profile & Preferences                                  │  │
│  │                                                                      │  │
│  │  ┌─────────────────────────────────────────────────────────────┐  │  │
│  │  │ NAVIGATION MENU                                             │  │  │
│  │  ├─────────────────────────────────────────────────────────────┤  │  │
│  │  │ 📊 Dashboard Stats    │ 💊 Medications   │ 🔍 Drug Lookup │  │  │
│  │  │ 🤖 Chatbot          │ ⚙️  Settings     │ 🚪 Logout      │  │  │
│  │  └─────────────────────────────────────────────────────────────┘  │  │
│  │                                                                      │  │
│  │  ┌────────────────────────────────────────────────────────────┐   │  │
│  │  │ CONTENT AREA (Dynamic Based on Selection)                │   │  │
│  │  └────────────────────────────────────────────────────────────┘   │  │
│  │                                                                      │  │
│  └──────────────────────────────────────────────────────────────────────┘  │
│                                                                             │
│  ┌─ Choose Section ──────────┬──────────────┬─────────────────────┐       │
│  │                           │              │                     │       │
│  ↓                           ↓              ↓                     ↓       │
│  │                                                                       │
│  📊 DASHBOARD ANALYTICS    💊 MEDICATIONS MANAGER  🔍 DRUG LOOKUP       │
│  ├────────────────────────┐ ├──────────────────┐  ├─────────────────┐  │
│  │ View Statistics        │ │ View All Meds    │  │ Search Drugs    │  │
│  │ • Adherence Rate       │ │ • List View      │  │ • By Name       │  │
│  │ • Missed Doses         │ │ • Filter/Sort    │  │ • By Category   │  │
│  │ • Monthly Trends       │ │                  │  │ • AI Analysis   │  │
│  │ • Recharts Graphs      │ │ Add New Meds:    │  │                 │  │
│  │ • Accessibility Mode   │ │ • Name           │  │ Get Details:    │  │
│  │                        │ │ • Dosage         │  │ • Side Effects  │  │
│  └────────────────────────┘ │ • Frequency      │  │ • Interactions  │  │
│                             │ • Reminders      │  │ • Alternatives  │  │
│                             │ • Edit/Delete    │  │ • Gemini AI     │  │
│                             │                  │  │   Analysis      │  │
│                             └──────────────────┘  └─────────────────┘  │
│  ┌────────────────────────────────────────────────────────────────┐    │
│  │ 🤖 CHATBOT ASSISTANT                                          │    │
│  │ ├─────────────────────────────────────────────────────────┐   │    │
│  │ │ • Ask Questions about Medications                      │   │    │
│  │ │ • Get AI-powered Recommendations (Gemini API)          │   │    │
│  │ │ • Medication Interactions Check                        │   │    │
│  │ │ • Emergency Alerts & Notifications                     │   │    │
│  │ │ • Natural Language Processing                          │   │    │
│  │ └─────────────────────────────────────────────────────────┘   │    │
│  └────────────────────────────────────────────────────────────────┘    │
│                                                                         │
│  ⚙️ SETTINGS PANEL                                                     │
│  ├───────────────────────────────────────────────────────────────┐    │
│  │ • Accessibility Settings (Large Text, High Contrast)         │    │
│  │ • Notification Preferences                                   │    │
│  │ • Medication Reminders Configuration                        │    │
│  │ • Profile Management                                        │    │
│  │ • Theme Selection (Light/Dark Mode)                         │    │
│  │ • Export Data                                               │    │
│  └───────────────────────────────────────────────────────────────┘    │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────────┘

Data Flow Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         CLIENT SIDE                             │
│                    (React + TypeScript)                         │
│                                                                 │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  Components Layer:                                        │  │
│  │  • Login.tsx          • Medications.tsx                   │  │
│  │  • Register.tsx       • Dashboard.tsx                     │  │
│  │  • Chatbot.tsx        • DrugLookup.tsx                    │  │
│  │  • Settings.tsx       • App.tsx (Router)                  │  │
│  └───────────────────────────────────────────────────────────┘  │
│                          ↓                                      │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  Services Layer:                                          │  │
│  │  • api.ts (HTTP Client)                                   │  │
│  │  • Handles Requests/Responses                             │  │
│  │  • JWT Token Management                                   │  │
│  │  • State Management                                       │  │
│  └───────────────────────────────────────────────────────────┘  │
│                          ↓                                      │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  Styling & Animation: