# mayaz120102/roktoshetu-frontend-v1 architecture

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

- Interactive diagram: https://gitdiagram.com/mayaz120102/roktoshetu-frontend-v1
- Repository: https://github.com/mayaz120102/roktoshetu-frontend-v1

## Overview

RoktoShetu is a role-based blood and emergency network frontend: requesters manage blood requests, donors discover requests and respond, hospitals manage requests and blood stock, and admins manage users and requests. The main flow spans account access, request creation, donor response, and hospital/admin oversight. The README is only the Vite template; product capabilities are inferred from the route tree and sampled pages. Several domain pages were not sampled, so their backend wiring is not shown.

Main entry points: [`src/api/axios.js`](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/api/axios.js) (API client), [`src/App.jsx`](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/App.jsx) (Route application), [`src/components/ProtectedRoute.jsx`](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/components/ProtectedRoute.jsx) (Role guard), [`src/context/AuthContext.jsx`](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/context/AuthContext.jsx) (Auth state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App and access"]
  node_app["Route application<br/>[App.jsx]"]
  node_guard["Role guard<br/>[ProtectedRoute.jsx]"]
  node_dashboard["Role dashboard"]
  node_api["API client<br/>[axios.js]"]
end

subgraph group_accounts["Accounts"]
  node_auth["Auth state<br/>[AuthContext.jsx]"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_register["Account registration<br/>[Register.jsx]"]
  node_recovery["Password recovery<br/>[ForgotPassword.jsx]"]
  node_reset["Password reset<br/>[ResetPassword.jsx]"]
  node_profile["User profile<br/>[Profile.jsx]"]
end

subgraph group_requesters["Requester workflow"]
  node_request_list["My requests<br/>[MyRequests.jsx]"]
  node_request_form["Request create/edit<br/>[RequestForm.jsx]"]
  node_request_responses["Request responses"]
end

subgraph group_donors["Donor workflow"]
  node_open_requests["Open requests<br/>[OpenRequests.jsx]"]
  node_donor_responses["My responses<br/>[MyResponses.jsx]"]
end

subgraph group_operations["Hospital and admin"]
  node_hospital_requests["Hospital requests"]
  node_stock["Blood stock<br/>[Stock.jsx]"]
  node_pending["Hospital approval"]
  node_admin_requests["All requests<br/>[AllRequests.jsx]"]
  node_users["User administration<br/>[Users.jsx]"]
end

node_person(("Network user"))
node_backend{{"Application backend"}}

node_person -->|"opens"| node_app
node_app -->|"provides auth"| node_auth
node_app -->|"routes through"| node_guard
node_guard -->|"renders allowed"| node_dashboard
node_person -->|"signs in"| node_login
node_person -->|"registers"| node_register
node_person -->|"requests recovery"| node_recovery
node_person -->|"resets password"| node_reset
node_auth -->|"checks and logs in"| node_api
node_api -->|"sends requests"| node_backend
node_request_list -->|"loads and changes"| node_api
node_request_form -->|"submits request"| node_api
node_request_responses -->|"loads responses"| node_api
node_open_requests -->|"loads and responds"| node_api
node_donor_responses -->|"loads history"| node_api
node_hospital_requests -->|"uses endpoints"| node_api
node_stock -->|"reads and updates"| node_api
node_pending -->|"uses endpoints"| node_api
node_admin_requests -->|"uses endpoints"| node_api
node_users -->|"loads and updates"| node_api
node_profile -->|"uses endpoints"| node_api

click node_app "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/App.jsx"
click node_guard "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/components/ProtectedRoute.jsx"
click node_dashboard "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/layouts/DashboradLayout.jsx"
click node_auth "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/context/AuthContext.jsx"
click node_login "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/Login.jsx"
click node_register "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/Register.jsx"
click node_recovery "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/ForgotPassword.jsx"
click node_reset "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/ResetPassword.jsx"
click node_profile "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/Profile.jsx"
click node_request_list "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/requester/MyRequests.jsx"
click node_request_form "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/requester/RequestForm.jsx"
click node_request_responses "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/requester/RequestResponses.jsx"
click node_open_requests "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/donor/OpenRequests.jsx"
click node_donor_responses "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/donor/MyResponses.jsx"
click node_hospital_requests "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/hospital/HospitalRequests.jsx"
click node_stock "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/hospital/Stock.jsx"
click node_pending "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/hospital/PendingApproval.jsx"
click node_admin_requests "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/admin/AllRequests.jsx"
click node_users "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/admin/Users.jsx"
click node_api "https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/api/axios.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_guard,node_dashboard,node_api,node_person toneBlue
class node_auth,node_login,node_register,node_recovery,node_reset,node_profile toneAmber
class node_request_list,node_request_form,node_request_responses toneMint
class node_open_requests,node_donor_responses toneRose
class node_hospital_requests,node_stock,node_pending,node_admin_requests,node_users,node_backend toneIndigo
```

## Components

### App and access

- [Route application](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/App.jsx): `src/App.jsx`
- [Role guard](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`
- [Role dashboard](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/layouts/DashboradLayout.jsx): `src/layouts/DashboradLayout.jsx`
- [API client](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/api/axios.js): `src/api/axios.js`

### Accounts

- [Auth state](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Sign in](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Account registration](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/Register.jsx): `src/pages/Register.jsx`
- [Password recovery](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/ForgotPassword.jsx): `src/pages/ForgotPassword.jsx`
- [Password reset](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/ResetPassword.jsx): `src/pages/ResetPassword.jsx`
- [User profile](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/Profile.jsx): `src/pages/Profile.jsx`

### Requester workflow

- [My requests](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/requester/MyRequests.jsx): `src/pages/requester/MyRequests.jsx`
- [Request create/edit](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/requester/RequestForm.jsx): `src/pages/requester/RequestForm.jsx`
- [Request responses](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/requester/RequestResponses.jsx): `src/pages/requester/RequestResponses.jsx`

### Donor workflow

- [Open requests](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/donor/OpenRequests.jsx): `src/pages/donor/OpenRequests.jsx`
- [My responses](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/donor/MyResponses.jsx): `src/pages/donor/MyResponses.jsx`

### Hospital and admin

- [Hospital requests](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/hospital/HospitalRequests.jsx): `src/pages/hospital/HospitalRequests.jsx`
- [Blood stock](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/hospital/Stock.jsx): `src/pages/hospital/Stock.jsx`
- [Hospital approval](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/hospital/PendingApproval.jsx): `src/pages/hospital/PendingApproval.jsx`
- [All requests](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/admin/AllRequests.jsx): `src/pages/admin/AllRequests.jsx`
- [User administration](https://github.com/mayaz120102/roktoshetu-frontend-v1/blob/main/src/pages/admin/Users.jsx): `src/pages/admin/Users.jsx`

### Other components

- **Network user**
- **Application backend**

## Connections

- Network user → Route application: opens
- Route application → Auth state: provides auth
- Route application → Role guard: routes through
- Role guard → Role dashboard: renders allowed
- Network user → Sign in: signs in
- Network user → Account registration: registers
- Network user → Password recovery: requests recovery
- Network user → Password reset: resets password
- Auth state → API client: checks and logs in
- API client → Application backend: sends requests
- My requests → API client: loads and changes
- Request create/edit → API client: submits request
- Request responses → API client: loads responses
- Open requests → API client: loads and responds
- My responses → API client: loads history
- Hospital requests → API client: uses endpoints
- Blood stock → API client: reads and updates
- Hospital approval → API client: uses endpoints
- All requests → API client: uses endpoints
- User administration → API client: loads and updates
- User profile → API client: uses endpoints