5erax/sep490_fe_medicalaiassistant

1. Purpose and Runtime

MediMate AI is a React SPA for pre-visit medical guidance: symptom intake/AI assistance, provider discovery, lab and medication workflows, subscriptions, and role-specific patient, staff, doctor, and admin workspaces. It runs on React 19/Vite and deploys to Vercel. Browser entry and application composition begin at src/main.jsx, src/App.jsx, and src/SpaRoot.jsx.

2. Routing, Identity, and Access Boundary

The SPA route manifest directs public, authenticated, and workspace screens; role/access logic and intended-return handling are centralized rather than embedded in pages. Key paths: src/router/routes.js, src/router/access.js, src/router/returnIntent.js. Authentication—including account login and Google OAuth—is mediated by src/services/authService.js and src/services/googleOAuthConfig.js. Pages such as src/pages/AuthPages.jsx and src/pages/WorkspaceRedirect.jsx are entry/transition surfaces.

3. API Integration Layer

UI code should follow the enforced flow: Page/Component → domain service → centralized endpoints → API client → backend. Shared transport, error treatment, and endpoint declarations live in src/services/apiClient.js, src/services/api.js, and src/services/endpoints.js. Domain services isolate backend contracts for clinical, account, facility, and payment operations, e.g. src/services/symptomAnalysisService.js, src/services/facilityService.js, and src/services/subscriptionService.js. The backend is an external MediMate API; Vite/Vercel proxy /api/* requests through api/proxy.js.

4. Patient Clinical Journey

The core patient flow collects symptoms, sends them to symptom/chat APIs, presents guidance/history, and transitions toward suitable facilities or further care workflows. The main UI/service boundaries are src/pages/SymptomAnalysisPage.jsx, src/components/patient/SymptomChatBox.jsx, src/hooks/useSymptomIntake.js, src/services/symptomChat.js, and src/services/consultationSessionService.js. Medical records, lab indicators, and self-reported medication information are distinct patient domains via src/pages/MedicalRecordPage.jsx, src/pages/MedicationScanPage.jsx, src/services/labTestService.js, and src/services/userMedicationService.js.

5. Discovery and Care Coordination

Facility/department/doctor discovery is presented through list/map UI and backend catalog services. Geographic rendering uses MapLibre GL/React Map GL, centered in src/pages/NearbyClinicPage.jsx, src/components/nearbyClinic/FacilityMap.jsx, and src/components/nearbyClinic/FacilityList.jsx; data access is through src/services/facilityService.js and src/services/doctorService.js. Recovery plans have both REST and realtime integration boundaries: src/pages/RecoveryPlanPage.jsx, src/services/recoveryPlanService.js, and src/services/recoveryPlanRealtime.js, using the configured backend hub origin.

6. Workspace and Administration

Workspace shells separate personalized patient operation from staff/admin management. Patient onboarding and profile completion are coordinated by src/components/workspace/UserWorkspaceShell.jsx, src/components/workspace/PatientOnboardingAssistant.jsx, and src/services/patientProfileSetup.js. Admin management is consolidated in src/pages/AdminWorkspacePage.jsx and domain sections such as src/components/adminAIConfigs/AdminAIConfigsSection.jsx and src/components/adminClinicalData/AdminClinicalCatalogSection.jsx, backed by administrative service modules including src/services/aiConfigManagement.js.

7. External Services and Deployment

External integrations are Google OAuth, Cloudinary direct uploads, PayOS-backed subscription/payment results, MapLibre map rendering, and backend realtime recovery-plan updates. Relevant adapters include src/services/cloudinaryUploadService.js, src/pages/PaymentResultPage.jsx, and src/services/recoveryPlanRealtime.js. Environment values select API, realtime, OAuth, and Cloudinary origins; production Vercel behavior is configured through vercel.json, with SPA routing and /api proxying.