preritkumar16/ehr_frontend_new

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.