# sumanng03-svg/bloodconnect-india-platform architecture

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

- Interactive diagram: https://gitdiagram.com/sumanng03-svg/bloodconnect-india-platform
- Repository: https://github.com/sumanng03-svg/bloodconnect-india-platform

## Overview

BloodConnect India is a React blood-coordination interface. Users can explore availability, enroll as donors, submit emergency blood requests, and view hospital-network and operational dashboards. The app shell holds mock request, inventory, hospital, donor, archive, and audit state and passes it to its views; the sampled code shows local state updates rather than a server-backed workflow. View-specific behavior beyond the excerpts is represented only where the tree and sampled imports support it.

Main entry points: [`src/App.tsx`](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/App.tsx) (Application state and routing), [`src/views/DonateBloodView.tsx`](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/DonateBloodView.tsx) (Donor profile and donations), [`src/views/RequestBloodView.tsx`](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/RequestBloodView.tsx) (Emergency request form), [`src/views/HomeView.tsx`](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/HomeView.tsx) (Availability and enrollment)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_app["Application state and routing<br/>[App.tsx]"]
  node_header["Navigation and role controls<br/>[Header.tsx]"]
  node_auth["Role sign-in modal<br/>[AuthModal.tsx]"]
  node_toast["Notifications"]
  node_footer["Footer navigation<br/>[Footer.tsx]"]
  node_mock["Initial coordination data<br/>[mockData.ts]"]
  node_types["Domain data types<br/>[bloodConnect.ts]"]
end

subgraph group_coordination["Blood coordination"]
  node_home["Availability and enrollment<br/>[HomeView.tsx]"]
  node_request["Emergency request form"]
  node_map["Facility location picker"]
  node_hospital["Hospital network"]
end

subgraph group_donors["Donor services"]
  node_donate["Donor profile and donations"]
  node_token["Donor ID token"]
end

subgraph group_operations["Network operations"]
  node_live["Live operations explorer"]
  node_admin["Administration dashboard"]
end

node_user(("Platform user"))

node_user -->|"navigates"| node_header
node_header -->|"changes view"| node_app
node_user -->|"uses application"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_home
node_app -->|"renders"| node_request
node_app -->|"renders"| node_hospital
node_app -->|"renders"| node_donate
node_app -->|"renders"| node_live
node_app -->|"renders"| node_admin
node_app -->|"renders"| node_footer
node_app -->|"initializes state"| node_mock
node_home -->|"requests reservation"| node_app
node_home -->|"enrollment callback"| node_app
node_request -->|"opens picker"| node_map
node_map -->|"confirms facility"| node_request
node_request -->|"submits request"| node_app
node_app -->|"passes donor data"| node_donate
node_donate -->|"updates donor"| node_app
node_donate -->|"adds archive record"| node_app
node_donate -->|"opens token"| node_token
node_app -->|"renders modal"| node_auth
node_auth -->|"returns role"| node_app
node_app -->|"renders alerts"| node_toast
node_app -->|"uses domain models"| node_types
node_mock -->|"defines typed data"| node_types

click node_app "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/App.tsx"
click node_header "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/Header.tsx"
click node_auth "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/AuthModal.tsx"
click node_toast "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/NotificationToast.tsx"
click node_footer "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/Footer.tsx"
click node_home "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/HomeView.tsx"
click node_request "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/RequestBloodView.tsx"
click node_map "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/OpenStreetMapModal.tsx"
click node_hospital "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/HospitalNetworkView.tsx"
click node_donate "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/DonateBloodView.tsx"
click node_token "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/DonorIdTokenModal.tsx"
click node_live "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/LiveExplorerView.tsx"
click node_admin "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/AdminDashboardView.tsx"
click node_mock "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/data/mockData.ts"
click node_types "https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/types/bloodConnect.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_auth,node_toast,node_footer,node_mock,node_types,node_user toneBlue
class node_home,node_request,node_map,node_hospital toneAmber
class node_donate,node_token toneMint
class node_live,node_admin toneRose
```

## Components

### App shell

- [Application state and routing](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation and role controls](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Role sign-in modal](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/AuthModal.tsx): `src/components/AuthModal.tsx`
- [Notifications](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/NotificationToast.tsx): `src/components/NotificationToast.tsx`
- [Footer navigation](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [Initial coordination data](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/data/mockData.ts): `src/data/mockData.ts`
- [Domain data types](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/types/bloodConnect.ts): `src/types/bloodConnect.ts`

### Blood coordination

- [Availability and enrollment](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/HomeView.tsx): `src/views/HomeView.tsx`
- [Emergency request form](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/RequestBloodView.tsx): `src/views/RequestBloodView.tsx`
- [Facility location picker](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/OpenStreetMapModal.tsx): `src/components/OpenStreetMapModal.tsx`
- [Hospital network](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/HospitalNetworkView.tsx): `src/views/HospitalNetworkView.tsx`

### Donor services

- [Donor profile and donations](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/DonateBloodView.tsx): `src/views/DonateBloodView.tsx`
- [Donor ID token](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/components/DonorIdTokenModal.tsx): `src/components/DonorIdTokenModal.tsx`

### Network operations

- [Live operations explorer](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/LiveExplorerView.tsx): `src/views/LiveExplorerView.tsx`
- [Administration dashboard](https://github.com/sumanng03-svg/bloodconnect-india-platform/blob/main/src/views/AdminDashboardView.tsx): `src/views/AdminDashboardView.tsx`

### Other components

- **Platform user**

## Connections

- Platform user → Navigation and role controls: navigates
- Navigation and role controls → Application state and routing: changes view
- Platform user → Application state and routing: uses application
- Application state and routing → Navigation and role controls: renders
- Application state and routing → Availability and enrollment: renders
- Application state and routing → Emergency request form: renders
- Application state and routing → Hospital network: renders
- Application state and routing → Donor profile and donations: renders
- Application state and routing → Live operations explorer: renders
- Application state and routing → Administration dashboard: renders
- Application state and routing → Footer navigation: renders
- Application state and routing → Initial coordination data: initializes state
- Availability and enrollment → Application state and routing: requests reservation
- Availability and enrollment → Application state and routing: enrollment callback
- Emergency request form → Facility location picker: opens picker
- Facility location picker → Emergency request form: confirms facility
- Emergency request form → Application state and routing: submits request
- Application state and routing → Donor profile and donations: passes donor data
- Donor profile and donations → Application state and routing: updates donor
- Donor profile and donations → Application state and routing: adds archive record
- Donor profile and donations → Donor ID token: opens token
- Application state and routing → Role sign-in modal: renders modal
- Role sign-in modal → Application state and routing: returns role
- Application state and routing → Notifications: renders alerts
- Application state and routing → Domain data types: uses domain models
- Initial coordination data → Domain data types: defines typed data