# sarowar-islam/resqhub_frontend architecture

> Architecture diagram of the GitHub repository sarowar-islam/resqhub_frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sarowar-islam/resqhub_frontend
- Repository: https://github.com/sarowar-islam/resqhub_frontend

## Overview

ResQHub is a frontend volunteer-coordination experience for disaster response. Users enter through a landing page, select or authenticate into a role-specific portal, and use that portal to view or coordinate help requests, missions, resources, and locations. The implementation shown is a React UI backed by in-memory session state and mock data; no persistent backend or live dispatch service is evidenced. The graph preserves the documented coordination scope while limiting relationships to source-index references and excerpted calls.

Main entry points: [`src/components/PortalLayout.tsx`](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/PortalLayout.tsx) (Portal Shell), [`src/app/App.tsx`](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/app/App.tsx) (View Router), [`src/data/mockData.ts`](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/data/mockData.ts) (Response Mock Data), [`src/components/MapView.tsx`](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/MapView.tsx) (Operations Map)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and Identity"]
  node_app["View Router<br/>[App.tsx]"]
  node_landing["Public Landing<br/>[Landing.tsx]"]
  node_auth["Role Authentication<br/>[Auth.tsx]"]
  node_session["Session State<br/>[SessionContext.tsx]"]
end

subgraph group_response["Response Portals"]
  node_victim["Victim Portal<br/>[VictimPortal.tsx]"]
  node_volunteer["Volunteer Portal"]
  node_ngo["NGO Portal<br/>[NGOPortal.tsx]"]
  node_admin["Admin Portal<br/>[AdminPortal.tsx]"]
end

subgraph group_shared["Shared Experience"]
  node_layout["Portal Shell<br/>[PortalLayout.tsx]"]
  node_map["Operations Map<br/>[MapView.tsx]"]
  node_chat["Response Assistant<br/>[AIChat.tsx]"]
  node_verify["Email Verification Banner"]
end

subgraph group_domain["Response Data"]
  node_mock["Response Mock Data<br/>[mockData.ts]"]
end

node_visitor(("People in need, volunteers, partners"))

node_visitor -->|"opens"| node_landing
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_auth
node_app -->|"routes to"| node_victim
node_app -->|"routes to"| node_volunteer
node_app -->|"routes to"| node_ngo
node_app -->|"routes to"| node_admin
node_app -->|"reads and resets"| node_session
node_landing -->|"navigates to"| node_auth
node_landing -->|"renders"| node_map
node_victim -->|"uses"| node_layout
node_volunteer -->|"uses"| node_layout
node_ngo -->|"uses"| node_layout
node_admin -->|"uses"| node_layout
node_victim -->|"renders"| node_map
node_volunteer -->|"renders"| node_map
node_admin -->|"renders"| node_map
node_victim -->|"reads requests"| node_mock
node_volunteer -->|"reads data"| node_mock
node_ngo -->|"reads data"| node_mock
node_admin -->|"reads data"| node_mock
node_layout -->|"renders"| node_chat
node_layout -->|"renders"| node_verify
node_layout -->|"reads session"| node_session
node_layout -->|"reads notifications"| node_mock
node_chat -->|"reads responses"| node_mock
node_map -->|"uses marker types"| node_mock
node_verify -->|"reads session"| node_session

click node_app "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/app/App.tsx"
click node_landing "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/Landing.tsx"
click node_auth "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/Auth.tsx"
click node_session "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/context/SessionContext.tsx"
click node_victim "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/VictimPortal.tsx"
click node_volunteer "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/VolunteerPortal.tsx"
click node_ngo "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/NGOPortal.tsx"
click node_admin "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/AdminPortal.tsx"
click node_layout "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/PortalLayout.tsx"
click node_map "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/MapView.tsx"
click node_chat "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/AIChat.tsx"
click node_verify "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/VerifyEmailBanner.tsx"
click node_mock "https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/data/mockData.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_landing,node_auth,node_session toneBlue
class node_victim,node_volunteer,node_ngo,node_admin toneAmber
class node_layout,node_map,node_chat,node_verify toneMint
class node_mock toneRose
class node_visitor toneIndigo
```

## Components

### Entry and Identity

- [View Router](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [Public Landing](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/Landing.tsx): `src/pages/Landing.tsx`
- [Role Authentication](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/Auth.tsx): `src/pages/Auth.tsx`
- [Session State](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/context/SessionContext.tsx): `src/context/SessionContext.tsx`

### Response Portals

- [Victim Portal](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/VictimPortal.tsx): `src/pages/VictimPortal.tsx`
- [Volunteer Portal](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/VolunteerPortal.tsx): `src/pages/VolunteerPortal.tsx`
- [NGO Portal](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/NGOPortal.tsx): `src/pages/NGOPortal.tsx`
- [Admin Portal](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/pages/AdminPortal.tsx): `src/pages/AdminPortal.tsx`

### Shared Experience

- [Portal Shell](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/PortalLayout.tsx): `src/components/PortalLayout.tsx`
- [Operations Map](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/MapView.tsx): `src/components/MapView.tsx`
- [Response Assistant](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/AIChat.tsx): `src/components/AIChat.tsx`
- [Email Verification Banner](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/components/VerifyEmailBanner.tsx): `src/components/VerifyEmailBanner.tsx`

### Response Data

- [Response Mock Data](https://github.com/sarowar-islam/resqhub_frontend/blob/main/src/data/mockData.ts): `src/data/mockData.ts`

### Other components

- **People in need, volunteers, partners**

## Connections

- People in need, volunteers, partners → Public Landing: opens (evidence: `README.md`)
- View Router → Public Landing: routes to (evidence: `src/app/App.tsx`)
- View Router → Role Authentication: routes to (evidence: `src/app/App.tsx`)
- View Router → Victim Portal: routes to (evidence: `src/app/App.tsx`)
- View Router → Volunteer Portal: routes to (evidence: `src/app/App.tsx`)
- View Router → NGO Portal: routes to (evidence: `src/app/App.tsx`)
- View Router → Admin Portal: routes to (evidence: `src/app/App.tsx`)
- View Router → Session State: reads and resets (evidence: `src/app/App.tsx`)
- Public Landing → Role Authentication: navigates to (evidence: `src/pages/Landing.tsx`)
- Public Landing → Operations Map: renders (evidence: `src/pages/Landing.tsx`)
- Victim Portal → Portal Shell: uses (evidence: `src/pages/VictimPortal.tsx`)
- Volunteer Portal → Portal Shell: uses (evidence: `src/pages/VolunteerPortal.tsx`)
- NGO Portal → Portal Shell: uses (evidence: `src/pages/NGOPortal.tsx`)
- Admin Portal → Portal Shell: uses (evidence: `src/pages/AdminPortal.tsx`)
- Victim Portal → Operations Map: renders (evidence: `src/pages/VictimPortal.tsx`)
- Volunteer Portal → Operations Map: renders (evidence: `src/pages/VolunteerPortal.tsx`)
- Admin Portal → Operations Map: renders (evidence: `src/pages/AdminPortal.tsx`)
- Victim Portal → Response Mock Data: reads requests (evidence: `src/pages/VictimPortal.tsx`)
- Volunteer Portal → Response Mock Data: reads data (evidence: `src/pages/VolunteerPortal.tsx`)
- NGO Portal → Response Mock Data: reads data (evidence: `src/pages/NGOPortal.tsx`)
- Admin Portal → Response Mock Data: reads data (evidence: `src/pages/AdminPortal.tsx`)
- Portal Shell → Response Assistant: renders (evidence: `src/components/PortalLayout.tsx`)
- Portal Shell → Email Verification Banner: renders (evidence: `src/components/PortalLayout.tsx`)
- Portal Shell → Session State: reads session (evidence: `src/components/PortalLayout.tsx`)
- Portal Shell → Response Mock Data: reads notifications (evidence: `src/components/PortalLayout.tsx`)
- Response Assistant → Response Mock Data: reads responses (evidence: `src/components/AIChat.tsx`)
- Operations Map → Response Mock Data: uses marker types (evidence: `src/components/MapView.tsx`)
- Email Verification Banner → Session State: reads session (evidence: `src/components/VerifyEmailBanner.tsx`)