Web application for MedSync, an AI-enhanced Electronic Health Record (EHR) platform focused on continuity of care and interoperable patient data across healthcare facilities. This repository contains the frontend only (React, TypeScript, Vite). It talks to a separate backend over HTTP (REST) and WebSockets.
Introducing MedSync – a smarter, connected future for Nigerian healthcare.
MedSync is a full-featured, EHR designed for a major challenge in Nigeria’s healthcare system; records that stay on paper or inside isolated systems, with little safe sharing between providers. That lack of interoperability weakens care, especially in emergencies or when patients move between facilities.
MedSync targets a secure, cloud-based experience with unified patient context, role-specific workspaces, real-time messaging, an AI assistant to support clinical decisions (grounded in the patient record), medical history and lab workflows.
The work sits in a broader academic research thread I led; Design and Development of a Centralized EHR System for Healthcare Providers in Nigeria, looking at systemic barriers to interoperability and a practical, scalable path for continuity of care.
The effort unfolded in two broad phases: research on adoption, policy, and operational constraints in Nigeria, then design and implementation of a working prototype aligned with those realities.
The product was developed and deployed end-to-end; live hosting may be intermittent when budgets or infrastructure change. The codebase remains a strong proof of concept for decentralized health systems that still need a single, trusted view of the patient.
Credit to Emmanuel Tanimowo for documentation and engineering support.
Notion walkthrough: MedSync – A Centralized AI-Powered Electronic Health Records System
- Landing: About, and contact routes under the public web layout.
- Authentication: sign-in and sign-up (including health provider vs patient paths), OTP confirmation, password reset, JWT storage for API calls.
- Role-based app shell: dashboard layout, sidebar, and mobile navigation depend on
user_typefrom the authenticated profile (patient,admin,doctor,lab_tech). - Hospital-aware profiles: users can be associated with hospitals; admins are guided to complete hospital setup before the rest of the admin navigation unlocks.
- Patients and staff: patient directory, add patient, patient profile and clinical detail views, staff listing and onboarding (doctors, lab technicians, admins).
- Medical records: list and detail views, filtering (including prescriptions as a record type), printable summaries, and flows to add structured records (notes, prescriptions, test advisories, vitals) against a patient.
- Appointments: calendar-oriented scheduling UI wired to appointment APIs.
- Messaging: chat UI with reconnecting WebSockets for real-time threads between authorized users.
- AI assistant (doctors): floating chat that posts to
chat_mgt/chatbot/and loads prior turns fromchat_mgt/conversations/, scoped to a patient where applicable. - Lab technician: test queue and test detail routes guarded for lab techs; reports area for lab-facing output.
- Security and account hygiene: MFA setup, password change, profile editing, and image/video upload for profile media via
user_mgt/upload_media/. - PWA: installable shell via
vite-plugin-pwaandpublic/manifest.json.
| Role | Primary focus in this UI |
|---|---|
| Admin | Hospital setup, patient roster, staff management, high-level stats on the admin dashboard. |
| Doctor | Assigned patients, appointments, chats, deep patient chart (vitals, appointments, records), doctor dashboard metrics, AI assistant on patient context. |
| Lab technician | Own test workload, test detail, reports; dashboard tuned to lab operations. |
| Patient | Linked hospitals, longitudinal records, appointments, vitals, chats, settings. |
Route guards (DoctorGuard, LabtechGuard) enforce sensitive views (for example patient chart for doctors, lab test views for lab techs).
- React + TypeScript
- Vite 6 (dev server default port 2025 in
package.json) - React Router 7
- TanStack Query for server state
- Axios for HTTP (
src/lib/instance.ts) - Tailwind CSS, Radix UI, shadcn-style components, Framer Motion
- Zod + React Hook Form for forms
- reconnecting-websocket for chat
- vite-plugin-pwa for progressive web app behavior
HTTP calls use import.meta.env.VITE_LOCAL_API_URL when set; otherwise the client uses **/api** as baseURL, which assumes a reverse proxy or same-origin API in production.
Create a .env or .env.local file as needed:
VITE_LOCAL_API_URL=https://your-api.example.comWebSocket chat in use-socket-chat is configured for development against **localhost:8000**; align host, path, and TLS with your deployment before shipping.
yarn install
yarn dev # Vite dev server (--port 2025 --host)
yarn build # Typecheck + production bundle
yarn preview # Preview production build
yarn lint # ESLint- Vercel:
vercel.jsonrewrites unknown paths to/for SPA routing. - PWA: icons reference
/logo.svg; adjust manifest and assets if you rebrand.
src/pages/– route modules (web, auth, dashboard) composed intosrc/routes/router.tsxsrc/components/– layouts, guards, screens, shared UIsrc/context/– auth user statesrc/hooks/– data mutations, queries, chat, formatting helperssrc/types.ts– shared API/domain types