# joydip-007/blood-donor-management architecture

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

- Interactive diagram: https://gitdiagram.com/joydip-007/blood-donor-management
- Repository: https://github.com/joydip-007/blood-donor-management

## Overview

This is a blood donor management web application. Users authenticate with OTP, register or maintain donor profiles, search donors by blood group and location, and submit emergency requests; administrators manage donors and requests and view statistics. The React app routes these workflows through a shared API configuration to a Node/Express backend. The README documents a relational database and email/geocoding/map integrations. Several feature relationships are documented or visible in the excerpts; unsampled implementation details are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/joydip-007/blood-donor-management/blob/main/src/App.tsx) (App router), [`src/utils/api.ts`](https://github.com/joydip-007/blood-donor-management/blob/main/src/utils/api.ts) (API client), [`server/index.js`](https://github.com/joydip-007/blood-donor-management/blob/main/server/index.js) (Express API), [`src/components/DonorRegistration.tsx`](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorRegistration.tsx) (Donor registration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application routing"]
  node_app["App router<br/>[App.tsx]"]
  node_authui["OTP sign-in<br/>[LoginSignup.tsx]"]
  node_authstate["Auth context<br/>[AuthContext.tsx]"]
end

subgraph group_donors["Donor workflows"]
  node_register["Donor registration"]
  node_profile["Donor profile<br/>[DonorProfile.tsx]"]
  node_search["Donor search<br/>[DonorSearch.tsx]"]
  node_map["Donor map<br/>[DonorMap.tsx]"]
end

subgraph group_operations["Requests and administration"]
  node_emergency["Emergency requests"]
  node_adminhome["Admin dashboard<br/>[AdminDashboard.tsx]"]
  node_adminadd["Add donor<br/>[AdminAddDonor.tsx]"]
  node_adminlist["Manage donors<br/>[AdminDonorList.tsx]"]
  node_adminrequests["Review requests"]
  node_statistics["Statistics<br/>[Statistics.tsx]"]
end

subgraph group_services["Backend and integrations"]
  node_api["API client<br/>[api.ts]"]
  node_geo["Geocoding<br/>[geocoding.ts]"]
  node_backend["Express API<br/>[index.js]"]
  node_database[("Relational database")]
  node_email["Resend email"]
  node_maps["Maps provider"]
end

node_user(("User"))
node_admin(("Administrator"))

node_user -->|"uses"| node_app
node_admin -->|"uses"| node_app
node_app -->|"routes to"| node_authui
node_app -->|"routes to"| node_register
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_emergency
node_app -->|"routes to"| node_statistics
node_app -->|"routes to"| node_adminadd
node_app -->|"routes to"| node_adminlist
node_app -->|"routes to"| node_adminrequests
node_authui -->|"verifies OTP"| node_authstate
node_authstate -->|"calls"| node_api
node_register -->|"submits donor"| node_api
node_profile -->|"loads profile"| node_api
node_search -->|"searches donors"| node_api
node_search -->|"renders results"| node_map
node_register -->|"geocodes location"| node_geo
node_geo -->|"requests geocoding"| node_backend
node_emergency -->|"submits request"| node_api
node_adminhome -->|"loads dashboard data"| node_api
node_adminadd -->|"creates donor"| node_api
node_adminlist -->|"manages donors"| node_api
node_adminrequests -->|"manages requests"| node_api
node_statistics -->|"loads statistics"| node_api
node_api -->|"sends API requests"| node_backend
node_backend -.->|"reads and writes"| node_database
node_backend -.->|"sends OTP"| node_email
node_backend -.->|"geocodes locations"| node_maps
node_map -.->|"visualizes locations"| node_maps

click node_app "https://github.com/joydip-007/blood-donor-management/blob/main/src/App.tsx"
click node_authui "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Auth/LoginSignup.tsx"
click node_authstate "https://github.com/joydip-007/blood-donor-management/blob/main/src/contexts/AuthContext.tsx"
click node_api "https://github.com/joydip-007/blood-donor-management/blob/main/src/utils/api.ts"
click node_register "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorRegistration.tsx"
click node_profile "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorProfile.tsx"
click node_search "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorSearch.tsx"
click node_map "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorMap.tsx"
click node_geo "https://github.com/joydip-007/blood-donor-management/blob/main/src/utils/geocoding.ts"
click node_emergency "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/EmergencyRequest.tsx"
click node_adminhome "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminDashboard.tsx"
click node_adminadd "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminAddDonor.tsx"
click node_adminlist "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminDonorList.tsx"
click node_adminrequests "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminEmergencyRequests.tsx"
click node_statistics "https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Statistics.tsx"
click node_backend "https://github.com/joydip-007/blood-donor-management/blob/main/server/index.js"

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_authui,node_authstate,node_user toneBlue
class node_register,node_profile,node_search,node_map toneAmber
class node_emergency,node_adminhome,node_adminadd,node_adminlist,node_adminrequests,node_statistics toneMint
class node_api,node_geo,node_backend,node_database,node_email,node_maps toneRose
class node_admin toneIndigo
```

## Components

### Application routing

- [App router](https://github.com/joydip-007/blood-donor-management/blob/main/src/App.tsx): `src/App.tsx`
- [OTP sign-in](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Auth/LoginSignup.tsx): `src/components/Auth/LoginSignup.tsx`
- [Auth context](https://github.com/joydip-007/blood-donor-management/blob/main/src/contexts/AuthContext.tsx): `src/contexts/AuthContext.tsx`

### Donor workflows

- [Donor registration](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorRegistration.tsx): `src/components/DonorRegistration.tsx`
- [Donor profile](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorProfile.tsx): `src/components/DonorProfile.tsx`
- [Donor search](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorSearch.tsx): `src/components/DonorSearch.tsx`
- [Donor map](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/DonorMap.tsx): `src/components/DonorMap.tsx`

### Requests and administration

- [Emergency requests](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/EmergencyRequest.tsx): `src/components/EmergencyRequest.tsx`
- [Admin dashboard](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminDashboard.tsx): `src/components/Admin/AdminDashboard.tsx`
- [Add donor](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminAddDonor.tsx): `src/components/Admin/AdminAddDonor.tsx`
- [Manage donors](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminDonorList.tsx): `src/components/Admin/AdminDonorList.tsx`
- [Review requests](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Admin/AdminEmergencyRequests.tsx): `src/components/Admin/AdminEmergencyRequests.tsx`
- [Statistics](https://github.com/joydip-007/blood-donor-management/blob/main/src/components/Statistics.tsx): `src/components/Statistics.tsx`

### Backend and integrations

- [API client](https://github.com/joydip-007/blood-donor-management/blob/main/src/utils/api.ts): `src/utils/api.ts`
- [Geocoding](https://github.com/joydip-007/blood-donor-management/blob/main/src/utils/geocoding.ts): `src/utils/geocoding.ts`
- [Express API](https://github.com/joydip-007/blood-donor-management/blob/main/server/index.js): `server/index.js`
- **Relational database**
- **Resend email**
- **Maps provider**

### Other components

- **User**
- **Administrator**

## Connections

- User → App router: uses
- Administrator → App router: uses
- App router → OTP sign-in: routes to (evidence: `src/App.tsx`)
- App router → Donor registration: routes to (evidence: `src/App.tsx`)
- App router → Donor profile: routes to (evidence: `src/App.tsx`)
- App router → Emergency requests: routes to (evidence: `src/App.tsx`)
- App router → Statistics: routes to (evidence: `src/App.tsx`)
- App router → Add donor: routes to (evidence: `src/App.tsx`)
- App router → Manage donors: routes to (evidence: `src/App.tsx`)
- App router → Review requests: routes to (evidence: `src/App.tsx`)
- OTP sign-in → Auth context: verifies OTP (evidence: `src/components/Auth/LoginSignup.tsx`)
- Auth context → API client: calls (evidence: `src/contexts/AuthContext.tsx`)
- Donor registration → API client: submits donor (evidence: `src/components/DonorRegistration.tsx`)
- Donor profile → API client: loads profile (evidence: `src/components/DonorProfile.tsx`)
- Donor search → API client: searches donors (evidence: `src/components/DonorSearch.tsx`)
- Donor search → Donor map: renders results (evidence: `src/components/DonorSearch.tsx`)
- Donor registration → Geocoding: geocodes location (evidence: `src/components/DonorRegistration.tsx`)
- Geocoding → Express API: requests geocoding (evidence: `src/utils/geocoding.ts`)
- Emergency requests → API client: submits request (evidence: `src/components/EmergencyRequest.tsx`)
- Admin dashboard → API client: loads dashboard data (evidence: `src/components/Admin/AdminDashboard.tsx`)
- Add donor → API client: creates donor (evidence: `src/components/Admin/AdminAddDonor.tsx`)
- Manage donors → API client: manages donors (evidence: `src/components/Admin/AdminDonorList.tsx`)
- Review requests → API client: manages requests (evidence: `src/components/Admin/AdminEmergencyRequests.tsx`)
- Statistics → API client: loads statistics (evidence: `src/components/Statistics.tsx`)
- API client → Express API: sends API requests
- Express API → Relational database: reads and writes
- Express API → Resend email: sends OTP
- Express API → Maps provider: geocodes locations
- Donor map → Maps provider: visualizes locations