# ektarathi20/ciivf-frontend architecture

> Architecture diagram of the GitHub repository ektarathi20/ciivf-frontend, 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/ektarathi20/ciivf-frontend
- Repository: https://github.com/ektarathi20/ciivf-frontend

## Overview

CIIVF Frontend is a coastal climate-risk dashboard. An officer opens the workspace, selects a region, and the app loads regional conditions, population, infrastructure, forecast, and cyclone history for its overview; a separate alert hook combines an initial snapshot with live Socket.IO events for inbox display. Settings expose an optional WhatsApp verification flow. The README also describes task, threat, rescue, route, and recovery screens, but marks them as legacy/demo or unavailable rather than active API-backed workflows. Edges reflect documented data flow; unsampled component wiring is not inferred.

Main entry points: [`src/App.tsx`](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/App.tsx) (Dashboard app), [`src/climateAlerts.ts`](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/climateAlerts.ts) (Alert REST and socket client), [`src/api.ts`](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/api.ts) (REST API client), [`src/main.tsx`](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Dashboard shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_dashboard["Dashboard app<br/>[App.tsx]"]
  node_header["Header and navigation<br/>[Header.tsx]"]
  node_map["Facility map<br/>[MapComponent.tsx]"]
  node_weather["Hazard chart"]
  node_rightcards["Source status cards"]
  node_historical["Cyclone history"]
  node_settings["Notification settings<br/>[SettingsModal.tsx]"]
end

subgraph group_data["Regional data"]
  node_client["REST API client<br/>[api.ts]"]
end

subgraph group_alerts["Climate alerts"]
  node_alertshook["Alert state hook"]
  node_alertclient["Alert REST and socket client<br/>[climateAlerts.ts]"]
  node_inbox["Alert inbox"]
end

subgraph group_operations["Operations prototypes"]
  node_prototypes["Legacy mode views"]
  node_mockdata["Demo scenario data<br/>[mockData.ts]"]
  node_routes["Alternative routes modal"]
end

node_officer(("Officer"))
node_backend["CIIVF backend"]
node_weatherprovider["Weather and Places"]
node_populationprovider["Earth Engine / WorldPop"]
node_historyprovider["NOAA history source"]
node_tiles["OpenStreetMap tiles"]
node_socketservice["Socket.IO service"]
node_whatsapp["Twilio WhatsApp"]

node_officer -->|"opens dashboard"| node_entry
node_entry -->|"renders"| node_dashboard
node_dashboard -->|"requests regional data"| node_client
node_client -->|"calls REST API"| node_backend
node_backend -.->|"sources conditions and facilities"| node_weatherprovider
node_backend -.->|"sources population"| node_populationprovider
node_backend -.->|"sources cyclone history"| node_historyprovider
node_dashboard -->|"renders navigation"| node_header
node_dashboard -->|"passes regional facilities"| node_map
node_dashboard -->|"passes forecast"| node_weather
node_dashboard -->|"passes data status"| node_rightcards
node_dashboard -->|"opens history view"| node_historical
node_map -->|"loads basemap tiles"| node_tiles
node_dashboard -->|"uses alert state"| node_alertshook
node_alertshook -->|"loads and subscribes"| node_alertclient
node_alertclient -->|"loads alert snapshot"| node_backend
node_alertclient -->|"connects to event stream"| node_socketservice
node_socketservice -->|"dispatches climate alerts"| node_alertclient
node_dashboard -->|"displays alert state"| node_inbox
node_dashboard -->|"opens settings"| node_settings
node_settings -->|"requests WhatsApp configuration and verification"| node_client
node_backend -.->|"optional verification delivery"| node_whatsapp
node_prototypes -->|"reads demo scenarios"| node_mockdata
node_routes -->|"reads route examples"| node_mockdata

click node_entry "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/main.tsx"
click node_dashboard "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/App.tsx"
click node_header "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/Header.tsx"
click node_map "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/MapComponent.tsx"
click node_weather "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/WeatherHazardChart.tsx"
click node_rightcards "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/RightColumnCards.tsx"
click node_historical "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/HistoricalDisastersView.tsx"
click node_settings "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/modals/SettingsModal.tsx"
click node_client "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/api.ts"
click node_alertshook "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/useClimateAlerts.ts"
click node_alertclient "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/climateAlerts.ts"
click node_inbox "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/ClimateAlertInbox.tsx"
click node_prototypes "https://github.com/ektarathi20/ciivf-frontend/tree/main/src/components/modes"
click node_mockdata "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/data/mockData.ts"
click node_routes "https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/modals/AlternativeRoutesModal.tsx"

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_entry,node_dashboard,node_header,node_map,node_weather,node_rightcards,node_historical,node_settings toneBlue
class node_client toneAmber
class node_alertshook,node_alertclient,node_inbox toneMint
class node_prototypes,node_mockdata,node_routes toneRose
class node_officer,node_backend,node_weatherprovider,node_populationprovider,node_historyprovider,node_tiles,node_socketservice,node_whatsapp toneIndigo
```

## Components

### Dashboard shell

- [React entry](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/main.tsx): `src/main.tsx`
- [Dashboard app](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/App.tsx): `src/App.tsx`
- [Header and navigation](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Facility map](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/MapComponent.tsx): `src/components/MapComponent.tsx`
- [Hazard chart](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/WeatherHazardChart.tsx): `src/components/WeatherHazardChart.tsx`
- [Source status cards](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/RightColumnCards.tsx): `src/components/RightColumnCards.tsx`
- [Cyclone history](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/HistoricalDisastersView.tsx): `src/components/HistoricalDisastersView.tsx`
- [Notification settings](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/modals/SettingsModal.tsx): `src/components/modals/SettingsModal.tsx`

### Regional data

- [REST API client](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/api.ts): `src/api.ts`

### Climate alerts

- [Alert state hook](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/useClimateAlerts.ts): `src/useClimateAlerts.ts`
- [Alert REST and socket client](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/climateAlerts.ts): `src/climateAlerts.ts`
- [Alert inbox](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/ClimateAlertInbox.tsx): `src/components/ClimateAlertInbox.tsx`

### Operations prototypes

- [Legacy mode views](https://github.com/ektarathi20/ciivf-frontend/tree/main/src/components/modes): `src/components/modes`
- [Demo scenario data](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/data/mockData.ts): `src/data/mockData.ts`
- [Alternative routes modal](https://github.com/ektarathi20/ciivf-frontend/blob/main/src/components/modals/AlternativeRoutesModal.tsx): `src/components/modals/AlternativeRoutesModal.tsx`

### Other components

- **Officer**
- **CIIVF backend**
- **Weather and Places**
- **Earth Engine / WorldPop**
- **NOAA history source**
- **OpenStreetMap tiles**
- **Socket.IO service**
- **Twilio WhatsApp**

## Connections

- Officer → React entry: opens dashboard
- React entry → Dashboard app: renders
- Dashboard app → REST API client: requests regional data
- REST API client → CIIVF backend: calls REST API
- CIIVF backend → Weather and Places: sources conditions and facilities
- CIIVF backend → Earth Engine / WorldPop: sources population
- CIIVF backend → NOAA history source: sources cyclone history
- Dashboard app → Header and navigation: renders navigation
- Dashboard app → Facility map: passes regional facilities
- Dashboard app → Hazard chart: passes forecast
- Dashboard app → Source status cards: passes data status
- Dashboard app → Cyclone history: opens history view
- Facility map → OpenStreetMap tiles: loads basemap tiles
- Dashboard app → Alert state hook: uses alert state
- Alert state hook → Alert REST and socket client: loads and subscribes
- Alert REST and socket client → CIIVF backend: loads alert snapshot
- Alert REST and socket client → Socket.IO service: connects to event stream
- Socket.IO service → Alert REST and socket client: dispatches climate alerts
- Dashboard app → Alert inbox: displays alert state
- Dashboard app → Notification settings: opens settings
- Notification settings → REST API client: requests WhatsApp configuration and verification
- CIIVF backend → Twilio WhatsApp: optional verification delivery
- Legacy mode views → Demo scenario data: reads demo scenarios
- Alternative routes modal → Demo scenario data: reads route examples