# p-saiprasanth/blood-donation-system architecture

> Architecture diagram of the GitHub repository p-saiprasanth/blood-donation-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/p-saiprasanth/blood-donation-system
- Repository: https://github.com/p-saiprasanth/blood-donation-system

## Overview

This is a community blood-donation app, with donor registration, donor browsing, and emergency blood requests as its principal user workflows. The sampled emergency form sends blood group, city, and hospital to a localhost endpoint and displays the response. App.tsx references component files under components/, but those files are absent from the supplied tree; the sampled EmergencyRequestForm.tsx is at the repository root, so its connection to that route cannot be confirmed. No server or persistence implementation is present in the evidence.

Main entry points: [`App.tsx`](https://github.com/p-saiprasanth/blood-donation-system/blob/main/App.tsx) (App router), [`EmergencyRequestForm.tsx`](https://github.com/p-saiprasanth/blood-donation-system/blob/main/EmergencyRequestForm.tsx) (Emergency form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["App router<br/>[App.tsx]"]
  node_home["Home view"]
end

subgraph group_donors["Donor workflows"]
  node_registration["Donor registration"]
  node_donor_list["Donor directory"]
  node_blood_types["Blood group types<br/>[types.ts]"]
  node_blood_constants["Blood group options<br/>[constants.ts]"]
end

subgraph group_emergency["Emergency requests"]
  node_emergency_form["Emergency form"]
  node_emergency_api{{"Emergency endpoint"}}
end

node_visitor(("App user"))

node_visitor -->|"opens"| node_app
node_visitor -->|"submits request"| node_emergency_form
node_emergency_form -->|"POST request"| node_emergency_api
node_emergency_api -->|"returns result"| node_emergency_form
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_registration
node_app -->|"routes to"| node_donor_list

click node_app "https://github.com/p-saiprasanth/blood-donation-system/blob/main/App.tsx"
click node_emergency_form "https://github.com/p-saiprasanth/blood-donation-system/blob/main/EmergencyRequestForm.tsx"
click node_blood_types "https://github.com/p-saiprasanth/blood-donation-system/blob/main/types.ts"
click node_blood_constants "https://github.com/p-saiprasanth/blood-donation-system/blob/main/constants.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_home,node_visitor toneBlue
class node_registration,node_donor_list,node_blood_types,node_blood_constants toneAmber
class node_emergency_form,node_emergency_api toneMint
```

## Components

### App navigation

- [App router](https://github.com/p-saiprasanth/blood-donation-system/blob/main/App.tsx): `App.tsx`
- **Home view**

### Donor workflows

- **Donor registration**
- **Donor directory**
- [Blood group types](https://github.com/p-saiprasanth/blood-donation-system/blob/main/types.ts): `types.ts`
- [Blood group options](https://github.com/p-saiprasanth/blood-donation-system/blob/main/constants.ts): `constants.ts`

### Emergency requests

- [Emergency form](https://github.com/p-saiprasanth/blood-donation-system/blob/main/EmergencyRequestForm.tsx): `EmergencyRequestForm.tsx`
- **Emergency endpoint**

### Other components

- **App user**

## Connections

- App user → App router: opens
- App user → Emergency form: submits request
- Emergency form → Emergency endpoint: POST request
- Emergency endpoint → Emergency form: returns result
- App router → Home view: routes to
- App router → Donor registration: routes to
- App router → Donor directory: routes to