# preritkumar16/ehr_frontend_new architecture

> Architecture diagram of the GitHub repository preritkumar16/ehr_frontend_new, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/preritkumar16/ehr_frontend_new
- Repository: https://github.com/preritkumar16/ehr_frontend_new

## Overview

1. **What this repo is**
   - A single-page React 19 frontend for a healthcare management platform.
   - The app is split into public onboarding pages and protected, role-specific dashboards for **Patients**, **Doctors**, and **Hospital Admins**.

2. **Top-level runtime flow**
   - `main.tsx` boots the app.
   - `App.tsx` and `src/routes/AppRoutes.tsx` define the navigation shell and route selection.
   - The app is built with **Vite**, written in **TypeScript**, styled with **Tailwind CSS**, and uses **React Router DOM** for navigation.

3. **Route boundaries**
   - Public routes cover the marketing/auth entry points: home, login, register, forgot password, and reset password.
   - Protected routes cover dashboard areas for each role.
   - `src/routes/ProtectedRoute.tsx` and `src/routes/RoleBasedRoute.tsx` enforce authentication and role-based access.

4. **Authentication subsystem**
   - Auth lives in `src/features/auth/`.
   - It includes form components, auth pages, an auth hook, auth API service, and auth-specific types.
   - The README indicates session restoration from **local storage**, so auth state persists across refreshes.

5. **Global auth state**
   - `src/store/authStore.ts` is the central client-state store, likely using **Zustand**.
   - This store is the key boundary between login/session state and the rest of the application.
   - Other parts of the app read the current user and role from this store to decide which dashboard to show.

6. **Role-based feature slices**
   - The app is organized by domain under `src/features/`:
     - `admin/` for hospital administration
     - `doctor/` for clinician workflows
     - `patient/` for patient self-service
   - Each slice contains its own components, page entry point, service layer, and types, which keeps domain logic separated.

7. **Dashboard composition**
   - Each role has a dedicated dashboard page:
     - `AdminDashboard.tsx`
     - `DoctorDashboard.tsx`
     - `PatientDashboard.tsx`
   - These dashboards are assembled from smaller widgets such as stats cards, analytics panels, appointment lists, activity feeds, and record summaries.
   - The admin area is the most operationally dense, with components for user/doctor management, revenue, analytics, and activity logs.

8. **Shared UI layer**
   - Reusable primitives live under `src/components/ui/`.
   - These are shadcn-style components built on **Radix UI** patterns: button, card, dialog, sheet, dropdown, table, input, checkbox, badge, avatar, etc.
   - Common application chrome is in `src/components/common/` with navbar and sidebar components for dashboard navigation.

9. **Layout system**
   - `src/layouts/` contains `PublicLayout`, `AuthLayout`, `AdminLayout`, `DoctorLayout`, and `PatientLayout`.
   - The README notes these layouts exist but are not fully wired into the current route tree yet, so the present routing likely renders pages more directly than the final architecture intends.
   - For diagramming, treat layouts as intended shell boundaries around each route group.

10. **API boundary**
   - `src/config/axios.ts` centralizes the HTTP client.
   - All feature services (`authApi`, `adminApi`, `doctorApi`, `patientApi`) are thin frontend-to-backend adapters.
   - The frontend currently targets an external backend hosted on **Railway** at the API base URL described in the README.

11. **Data and type boundaries**
   - Each domain has its own `types/` folder, which keeps API payloads and component props aligned per feature.
   - Shared user-related types live under `src/types/`.
   - Utility helpers are in `src/lib/utils.ts`, indicating a small shared utility boundary for cross-cutting helpers.

12. **Public-facing pages**
   - `src/pages/` contains the generic marketing/legal entry points: Home, About, Contact, Privacy Policy, and Terms.
   - These are separated from feature dashboards and auth screens, which keeps public content distinct from application workflows.

13. **External dependencies that matter architecturally**
   - **Axios** handles server communication.
   - **Zustand** handles lightweight client state.
   - **React Router DOM** drives route and access control.
   - **Vercel** deployment is implied by `vercel.json`.
   - The codebase also includes TanStack Query, React Hook Form, and Zod, but the README suggests they are planned/future integrations rather than core current architecture.

14. **How to draw the system**
   - A good diagram would show: browser → React/Vite app shell → route guards → public pages or role-specific dashboards → feature services → external backend API.
   - Inside the app, separate the shared UI/layout layer from the three domain slices, with auth and global session state feeding the routing decisions.

Main entry points: [`src/routes/AppRoutes.tsx`](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/routes/AppRoutes.tsx) (Routes), [`src/components/common/Navbar/Navbar.tsx`](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/components/common/Navbar/Navbar.tsx) (Nav chrome), [`src/config/axios.ts`](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/config/axios.ts) (axios client), [`src/features/auth/hooks/useAuth.ts`](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/hooks/useAuth.ts) (useAuth)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime shell"]
  node_browser(("Browser<br/>client"))
  node_main["main.tsx<br/>boot<br/>[main.tsx]"]
  node_app["App shell<br/>react shell<br/>[App.tsx]"]
end

subgraph group_access["Routing & access"]
  node_routes["Routes<br/>routing<br/>[AppRoutes.tsx]"]
  node_protected["Protected<br/>guard<br/>[ProtectedRoute.tsx]"]
  node_rolebased["Role guard<br/>access control<br/>[RoleBasedRoute.tsx]"]
end

subgraph group_shared["Shared UI"]
  node_publiclayout["Public layout<br/>[PublicLayout.tsx]"]
  node_commonui["UI kit<br/>ui primitives<br/>[button.tsx]"]
  node_chrome["Nav chrome<br/>navigation chrome<br/>[Navbar.tsx]"]
end

subgraph group_auth["Auth"]
  node_authstore[("Auth store<br/>zustand state<br/>[authStore.ts]")]
  node_authhook["useAuth<br/>auth hook<br/>[useAuth.ts]"]
  node_authpages["Auth pages<br/>screens<br/>[Login.tsx]"]
  node_authforms["Auth forms<br/>[LoginForm.tsx]"]
  node_authapi["authApi<br/>[authApi.ts]"]
end

subgraph group_admin["Admin"]
  node_admindash["Admin dashboard<br/>[AdminDashboard.tsx]"]
  node_adminwidgets["Admin widgets<br/>modules<br/>[AdminStats.tsx]"]
  node_adminapi["adminApi<br/>[adminApi.ts]"]
end

subgraph group_doctor["Doctor"]
  node_doctordash["Doctor dashboard"]
  node_doctorwidgets["Doctor widgets<br/>modules<br/>[DoctorStats.tsx]"]
  node_doctorapi["doctorApi<br/>[doctorApi.ts]"]
end

subgraph group_patient["Patient"]
  node_patientdash["Patient dashboard"]
  node_patientwidgets["Patient widgets<br/>modules<br/>[WelcomeBanner.tsx]"]
  node_patientapi["patientApi<br/>[patientApi.ts]"]
end

subgraph group_public["Public pages"]
  node_publicpages["Public pages<br/>content pages<br/>[HomePage.tsx]"]
end

subgraph group_data["Data boundary"]
  node_axios["axios client<br/>http client<br/>[axios.ts]"]
  node_backend[("Backend API<br/>external backend")]
end

node_browser -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_routes
node_routes -->|"guards"| node_protected
node_routes -->|"filters"| node_rolebased
node_routes -->|"serves"| node_publicpages
node_routes -->|"serves"| node_authpages
node_routes -->|"routes to"| node_admindash
node_routes -->|"routes to"| node_doctordash
node_routes -->|"routes to"| node_patientdash
node_protected -->|"reads"| node_authstore
node_rolebased -->|"reads"| node_authstore
node_authpages -->|"composes"| node_authforms
node_authforms -->|"uses"| node_authhook
node_authhook -->|"updates"| node_authstore
node_authhook -->|"calls"| node_authapi
node_authapi -->|"uses"| node_axios
node_admindash -->|"assembles"| node_adminwidgets
node_adminwidgets -->|"fetches"| node_adminapi
node_adminapi -->|"uses"| node_axios
node_doctordash -->|"assembles"| node_doctorwidgets
node_doctorwidgets -->|"fetches"| node_doctorapi
node_doctorapi -->|"uses"| node_axios
node_patientdash -->|"assembles"| node_patientwidgets
node_patientwidgets -->|"fetches"| node_patientapi
node_patientapi -->|"uses"| node_axios
node_publicpages -->|"wraps"| node_publiclayout
node_admindash -->|"uses"| node_chrome
node_doctordash -->|"uses"| node_chrome
node_patientdash -->|"uses"| node_chrome
node_publiclayout -->|"builds on"| node_commonui
node_chrome -->|"builds on"| node_commonui

click node_main "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/main.tsx"
click node_app "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/App.tsx"
click node_routes "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/routes/AppRoutes.tsx"
click node_protected "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/routes/ProtectedRoute.tsx"
click node_rolebased "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/routes/RoleBasedRoute.tsx"
click node_authstore "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/store/authStore.ts"
click node_authhook "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/hooks/useAuth.ts"
click node_authpages "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/pages/Login.tsx"
click node_authforms "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/components/LoginForm.tsx"
click node_authapi "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/services/authApi.ts"
click node_publicpages "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/pages/HomePage.tsx"
click node_publiclayout "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/layouts/PublicLayout.tsx"
click node_commonui "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/components/ui/button.tsx"
click node_chrome "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/components/common/Navbar/Navbar.tsx"
click node_admindash "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/admin/pages/AdminDashboard.tsx"
click node_adminwidgets "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/admin/components/AdminStats.tsx"
click node_adminapi "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/admin/services/adminApi.ts"
click node_doctordash "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/doctor/pages/DoctorDashboard.tsx"
click node_doctorwidgets "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/doctor/components/DoctorStats.tsx"
click node_doctorapi "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/doctor/services/doctorApi.ts"
click node_patientdash "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/patient/pages/PatientDashboard.tsx"
click node_patientwidgets "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/patient/components/WelcomeBanner.tsx"
click node_patientapi "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/patient/services/patientApi.ts"
click node_axios "https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/config/axios.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_browser,node_main,node_app,node_patientdash,node_patientwidgets,node_patientapi toneBlue
class node_routes,node_protected,node_rolebased,node_publicpages toneAmber
class node_publiclayout,node_commonui,node_chrome,node_axios,node_backend toneMint
class node_authstore,node_authhook,node_authpages,node_authforms,node_authapi toneRose
class node_admindash,node_adminwidgets,node_adminapi toneIndigo
class node_doctordash,node_doctorwidgets,node_doctorapi toneTeal
```

## Components

### Runtime shell

Application bootstrap and navigation entrypoints

- **Browser**: client · User-facing SPA runtime
- [main.tsx](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/main.tsx): boot · Vite entrypoint · `src/main.tsx`
- [App shell](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/App.tsx): react shell · Top-level app component · `src/App.tsx`

### Routing & access

Route selection, protection, and role gating

- [Routes](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/routes/AppRoutes.tsx): routing · Route tree and navigation selection · `src/routes/AppRoutes.tsx`
- [Protected](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/routes/ProtectedRoute.tsx): guard · Authentication gate for private areas · `src/routes/ProtectedRoute.tsx`
- [Role guard](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/routes/RoleBasedRoute.tsx): access control · Role-specific route enforcement · `src/routes/RoleBasedRoute.tsx`

### Shared UI

Reusable layout and component primitives

- [Public layout](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/layouts/PublicLayout.tsx): layout · Shell for public-facing pages · `src/layouts/PublicLayout.tsx`
- [UI kit](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/components/ui/button.tsx): ui primitives · Reusable shadcn/Radix-style controls · `src/components/ui/button.tsx`
- [Nav chrome](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/components/common/Navbar/Navbar.tsx): navigation chrome · Navbar and sidebar components · `src/components/common/Navbar/Navbar.tsx`

### Auth

Login, session, and password flows

- [Auth store](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/store/authStore.ts): zustand state · Central session and user state · `src/store/authStore.ts`
- [useAuth](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/hooks/useAuth.ts): auth hook · Auth state/actions bridge · `src/features/auth/hooks/useAuth.ts`
- [Auth pages](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/pages/Login.tsx): screens · Login, register, and password recovery screens · `src/features/auth/pages/Login.tsx`
- [Auth forms](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/components/LoginForm.tsx): forms · Form components for auth workflows · `src/features/auth/components/LoginForm.tsx`
- [authApi](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/auth/services/authApi.ts): service · Auth backend adapter · `src/features/auth/services/authApi.ts`

### Admin

Hospital administration dashboard slice

- [Admin dashboard](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/admin/pages/AdminDashboard.tsx): dashboard · Operational hospital admin overview · `src/features/admin/pages/AdminDashboard.tsx`
- [Admin widgets](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/admin/components/AdminStats.tsx): modules · Stats, user/doctor management, revenue, analytics, logs · `src/features/admin/components/AdminStats.tsx`
- [adminApi](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/admin/services/adminApi.ts): service · Admin backend adapter · `src/features/admin/services/adminApi.ts`

### Doctor

Clinician dashboard slice

- [Doctor dashboard](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/doctor/pages/DoctorDashboard.tsx): dashboard · Clinician workflow overview · `src/features/doctor/pages/DoctorDashboard.tsx`
- [Doctor widgets](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/doctor/components/DoctorStats.tsx): modules · Queue, appointments, analytics, and patient summaries · `src/features/doctor/components/DoctorStats.tsx`
- [doctorApi](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/doctor/services/doctorApi.ts): service · Doctor backend adapter · `src/features/doctor/services/doctorApi.ts`

### Patient

Patient self-service dashboard slice

- [Patient dashboard](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/patient/pages/PatientDashboard.tsx): dashboard · Patient self-service overview · `src/features/patient/pages/PatientDashboard.tsx`
- [Patient widgets](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/patient/components/WelcomeBanner.tsx): modules · Health profile, appointments, records, finance, wellness, trends · `src/features/patient/components/WelcomeBanner.tsx`
- [patientApi](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/features/patient/services/patientApi.ts): service · Patient backend adapter · `src/features/patient/services/patientApi.ts`

### Public pages

Marketing and legal entry points

- [Public pages](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/pages/HomePage.tsx): content pages · Home, about, contact, and legal pages · `src/pages/HomePage.tsx`

### Data boundary

HTTP client and backend integration

- [axios client](https://github.com/preritkumar16/ehr_frontend_new/blob/main/src/config/axios.ts): http client · Shared HTTP client configuration · `src/config/axios.ts`
- **Backend API**: external backend · Railway-hosted server API

## Connections

- Browser → main.tsx: loads · Browser loads the SPA entry
- main.tsx → App shell: mounts · Bootstraps the root React tree
- App shell → Routes: renders · Top-level shell delegates navigation
- Routes → Protected: guards · Private routes require authentication
- Routes → Role guard: filters · Role-specific access control
- Routes → Public pages: serves · Public routes expose marketing/legal pages
- Routes → Auth pages: serves · Auth entry routes
- Routes → Admin dashboard: routes to · Admin area after access checks
- Routes → Doctor dashboard: routes to · Doctor area after access checks
- Routes → Patient dashboard: routes to · Patient area after access checks
- Protected → Auth store: reads · Checks session state
- Role guard → Auth store: reads · Uses current user role
- Auth pages → Auth forms: composes · Pages wrap the form components
- Auth forms → useAuth: uses · Form actions call auth hook
- useAuth → Auth store: updates · Writes session and user state
- useAuth → authApi: calls · Submits auth requests
- authApi → axios client: uses · Requests go through shared client
- Admin dashboard → Admin widgets: assembles · Dashboard composes admin modules
- Admin widgets → adminApi: fetches · Widgets load admin data
- adminApi → axios client: uses · API adapter uses shared client
- Doctor dashboard → Doctor widgets: assembles · Dashboard composes doctor modules
- Doctor widgets → doctorApi: fetches · Widgets load clinician data
- doctorApi → axios client: uses · API adapter uses shared client
- Patient dashboard → Patient widgets: assembles · Dashboard composes patient modules
- Patient widgets → patientApi: fetches · Widgets load patient data
- patientApi → axios client: uses · API adapter uses shared client
- Public pages → Public layout: wraps · Public content is intended to use public shell
- Admin dashboard → Nav chrome: uses · Dashboard navigation chrome
- Doctor dashboard → Nav chrome: uses · Dashboard navigation chrome
- Patient dashboard → Nav chrome: uses · Dashboard navigation chrome
- Public layout → UI kit: builds on · Layouts use shared primitives
- Nav chrome → UI kit: builds on · Navigation chrome is composed from UI primitives