How ektarathi20/ciivf-frontend works
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: App.tsx Dashboard app · climateAlerts.ts Alert REST and socket client · api.ts REST API client · main.tsx React entry
Components 23
Dashboard shell
- React entry
src/main.tsx - Dashboard app
src/App.tsx - Header and navigation
src/components/Header.tsx - Facility map
src/components/MapComponent.tsx - Hazard chart
src/components/WeatherHazardChart.tsx - Source status cards
src/components/RightColumnCards.tsx - Cyclone history
src/components/HistoricalDisastersView.tsx - Notification settings
src/components/modals/SettingsModal.tsx
Regional data
- REST API client
src/api.ts
Climate alerts
- Alert state hook
src/useClimateAlerts.ts - Alert REST and socket client
src/climateAlerts.ts - Alert inbox
src/components/ClimateAlertInbox.tsx
Operations prototypes
- Legacy mode views
src/components/modes - Demo scenario data
src/data/mockData.ts - Alternative routes modal
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 24
- 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