# kushalkasparaju-star/mediqr-main architecture

> Architecture diagram of the GitHub repository kushalkasparaju-star/mediqr-main, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kushalkasparaju-star/mediqr-main
- Repository: https://github.com/kushalkasparaju-star/mediqr-main

## Overview

MediQR is a React health-record app: patients register, maintain records, and present a generated QR code; providers use QR scanning to access patient information. App.tsx routes between home, login, registration, and role-specific dashboards. Patient and account data are persisted in browser localStorage, not a backend. The README documents QR scanning and hospital access, while sampled code confirms QR login and patient-profile record operations. Hospital-dashboard internals and home-page actions were not sampled, so those relationships are limited to documented or indexed evidence.

Main entry points: [`App.tsx`](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/App.tsx) (App router), [`services/authService.ts`](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/authService.ts) (Authentication service), [`pages/PatientDashboard.tsx`](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientDashboard.tsx) (Patient dashboard), [`pages/PatientProfileView.tsx`](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientProfileView.tsx) (Patient profile view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and navigation"]
  node_app["App router<br/>[App.tsx]"]
  node_header["Header navigation<br/>[Header.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_home["Home page<br/>[HomePage.tsx]"]
end

subgraph group_identity["Identity and registration"]
  node_login["Login and QR scan<br/>[LoginPage.tsx]"]
  node_registration["Patient registration"]
  node_auth["Authentication service<br/>[authService.ts]"]
  node_account_store[("Account local storage<br/>[authService.ts]")]
end

subgraph group_patient["Patient records"]
  node_patient_data["Patient service<br/>[patientService.ts]"]
  node_patient_store[("Patient local storage<br/>[patientService.ts]")]
  node_file_encode["File encoding<br/>[fileUtils.ts]"]
  node_patient_dashboard["Patient dashboard"]
  node_record_types["Record and user types<br/>[types.ts]"]
end

subgraph group_provider["Hospital access"]
  node_hospital_dashboard["Hospital dashboard"]
  node_profile["Patient profile view"]
end

node_patient_actor(("Patient"))
node_hospital_actor(("Hospital provider"))

node_patient_actor -->|"visits"| node_home
node_hospital_actor -->|"signs in"| node_login
node_app -->|"renders"| node_home
node_app -->|"renders"| node_login
node_app -->|"renders"| node_registration
node_app -->|"renders"| node_patient_dashboard
node_app -->|"renders"| node_hospital_dashboard
node_app -->|"checks session"| node_auth
node_app -->|"renders"| node_header
node_app -->|"renders"| node_footer
node_header -->|"changes page"| node_app
node_home -->|"selects page"| node_app
node_login -->|"authenticates"| node_auth
node_registration -->|"encodes files"| node_file_encode
node_registration -->|"registers patient"| node_auth
node_auth -->|"creates patient"| node_patient_data
node_auth -->|"reads and writes"| node_account_store
node_patient_data -->|"reads and writes"| node_patient_store
node_patient_dashboard -->|"loads and updates"| node_patient_data
node_patient_dashboard -->|"encodes uploads"| node_file_encode
node_hospital_dashboard -->|"opens profile"| node_profile
node_profile -->|"loads and updates"| node_patient_data
node_profile -->|"encodes uploads"| node_file_encode
node_patient_dashboard -->|"uses records"| node_record_types
node_profile -->|"uses records"| node_record_types
node_hospital_dashboard -.->|"scans patient QR"| node_login

click node_app "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/App.tsx"
click node_header "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/components/Header.tsx"
click node_footer "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/components/Footer.tsx"
click node_home "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/HomePage.tsx"
click node_login "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/LoginPage.tsx"
click node_registration "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientRegistration.tsx"
click node_auth "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/authService.ts"
click node_patient_data "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/patientService.ts"
click node_patient_store "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/patientService.ts"
click node_account_store "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/authService.ts"
click node_file_encode "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/utils/fileUtils.ts"
click node_patient_dashboard "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientDashboard.tsx"
click node_hospital_dashboard "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/HospitalDashboard.tsx"
click node_profile "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientProfileView.tsx"
click node_record_types "https://github.com/kushalkasparaju-star/mediqr-main/blob/main/types.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_app,node_header,node_footer,node_home toneBlue
class node_login,node_registration,node_auth,node_account_store toneAmber
class node_patient_data,node_patient_store,node_file_encode,node_patient_dashboard,node_record_types toneMint
class node_hospital_dashboard,node_profile toneRose
class node_patient_actor,node_hospital_actor toneIndigo
```

## Components

### App and navigation

- [App router](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/App.tsx): `App.tsx`
- [Header navigation](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/components/Header.tsx): `components/Header.tsx`
- [Footer](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Home page](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/HomePage.tsx): `pages/HomePage.tsx`

### Identity and registration

- [Login and QR scan](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/LoginPage.tsx): `pages/LoginPage.tsx`
- [Patient registration](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientRegistration.tsx): `pages/PatientRegistration.tsx`
- [Authentication service](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/authService.ts): `services/authService.ts`
- [Account local storage](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/authService.ts): `services/authService.ts`

### Patient records

- [Patient service](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/patientService.ts): `services/patientService.ts`
- [Patient local storage](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/services/patientService.ts): `services/patientService.ts`
- [File encoding](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/utils/fileUtils.ts): `utils/fileUtils.ts`
- [Patient dashboard](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientDashboard.tsx): `pages/PatientDashboard.tsx`
- [Record and user types](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/types.ts): `types.ts`

### Hospital access

- [Hospital dashboard](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/HospitalDashboard.tsx): `pages/HospitalDashboard.tsx`
- [Patient profile view](https://github.com/kushalkasparaju-star/mediqr-main/blob/main/pages/PatientProfileView.tsx): `pages/PatientProfileView.tsx`

### Other components

- **Patient**
- **Hospital provider**

## Connections

- Patient → Home page: visits (evidence: `README.md`)
- Hospital provider → Login and QR scan: signs in (evidence: `README.md`)
- App router → Home page: renders (evidence: `App.tsx`)
- App router → Login and QR scan: renders (evidence: `App.tsx`)
- App router → Patient registration: renders (evidence: `App.tsx`)
- App router → Patient dashboard: renders (evidence: `App.tsx`)
- App router → Hospital dashboard: renders (evidence: `App.tsx`)
- App router → Authentication service: checks session (evidence: `App.tsx`)
- App router → Header navigation: renders (evidence: `App.tsx`)
- App router → Footer: renders (evidence: `App.tsx`)
- Header navigation → App router: changes page (evidence: `components/Header.tsx`)
- Home page → App router: selects page (evidence: `App.tsx`)
- Login and QR scan → Authentication service: authenticates (evidence: `pages/LoginPage.tsx`)
- Patient registration → File encoding: encodes files (evidence: `pages/PatientRegistration.tsx`)
- Patient registration → Authentication service: registers patient (evidence: `pages/PatientRegistration.tsx`)
- Authentication service → Patient service: creates patient (evidence: `services/authService.ts`)
- Authentication service → Account local storage: reads and writes (evidence: `services/authService.ts`)
- Patient service → Patient local storage: reads and writes (evidence: `services/patientService.ts`)
- Patient dashboard → Patient service: loads and updates (evidence: `pages/PatientDashboard.tsx`)
- Patient dashboard → File encoding: encodes uploads (evidence: `pages/PatientDashboard.tsx`)
- Hospital dashboard → Patient profile view: opens profile (evidence: `pages/HospitalDashboard.tsx`)
- Patient profile view → Patient service: loads and updates (evidence: `pages/PatientProfileView.tsx`)
- Patient profile view → File encoding: encodes uploads (evidence: `pages/PatientProfileView.tsx`)
- Patient dashboard → Record and user types: uses records (evidence: `pages/PatientDashboard.tsx`)
- Patient profile view → Record and user types: uses records (evidence: `pages/PatientProfileView.tsx`)
- Hospital dashboard → Login and QR scan: scans patient QR (evidence: `README.md`)