# bariskisir/worldweathermonitor architecture

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

- Interactive diagram: https://gitdiagram.com/bariskisir/worldweathermonitor
- Repository: https://github.com/bariskisir/worldweathermonitor

## Overview

WorldWeatherMonitor is a React-based interactive world weather map. Users browse a Leaflet map or search for a place; selecting a location focuses the map, while clicking a weather marker opens detailed forecasts and related conditions. The map queries a background worker for viewport locations and requests weather data as markers are needed. The README also documents animated conditions, air quality, and hourly and 7-day forecasts. Source excerpts are partial, so uncertain internal wiring is omitted; unsampled features are represented only where supported by the README and tree.

Main entry points: [`src/react/ui/App.tsx`](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/ui/App.tsx) (App coordinator), [`src/react/features/popup/WeatherPopup.tsx`](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/popup/WeatherPopup.tsx) (Weather details), [`src/react/features/map/MapScene.tsx`](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/map/MapScene.tsx) (Map and markers), [`src/react/services/weatherApi.ts`](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/services/weatherApi.ts) (Weather API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_search["Location search<br/>[SearchBar.tsx]"]
  node_settingsui["Settings dialog<br/>[SettingsModal.tsx]"]
  node_popup["Weather details<br/>[WeatherPopup.tsx]"]
  node_chart["Forecast charts<br/>[WeatherChart.tsx]"]
  node_animation["Weather animation"]
end

subgraph group_map["Map and locations"]
  node_mapscene["Map and markers<br/>[MapScene.tsx]"]
  node_overlay["Map weather overlay"]
  node_markerutils["Marker utilities<br/>[markerUtils.ts]"]
  node_locationhook["Location index hook"]
  node_worker["Location query worker"]
  node_locationindex["Location index"]
  node_locationdata["Location records"]
end

subgraph group_weather["Weather data"]
  node_api["Weather API client<br/>[weatherApi.ts]"]
  node_mappings["Weather mappings<br/>[weatherMappings.ts]"]
  node_aborthook["Abortable fetch hook"]
end

subgraph group_preferences["Settings and state"]
  node_settings["Settings and formatting<br/>[settings.ts]"]
  node_storage["Local storage wrapper<br/>[storage.ts]"]
  node_cache["Response cache<br/>[cacheManager.ts]"]
end

node_visitor(("Map user"))
node_openmeteo["Open-Meteo"]
node_browserstore[("Browser local storage")]

node_visitor -->|"uses app"| node_app
node_app -->|"renders map"| node_mapscene
node_app -->|"renders search"| node_search
node_app -->|"renders settings"| node_settingsui
node_app -->|"renders details"| node_popup
node_search -->|"searches places"| node_api
node_search -->|"selects place"| node_app
node_app -->|"focuses map"| node_mapscene
node_mapscene -->|"queries locations"| node_locationhook
node_locationhook -->|"posts queries"| node_worker
node_worker -->|"fetches index"| node_locationindex
node_locationdata -->|"indexed records"| node_locationindex
node_worker -->|"returns matches"| node_locationhook
node_mapscene -->|"requests marker weather"| node_api
node_mapscene -->|"builds markers"| node_markerutils
node_mapscene -->|"updates overlay"| node_overlay
node_mapscene -->|"opens details"| node_popup
node_api -->|"fetches conditions"| node_openmeteo
node_popup -->|"fetches air quality"| node_api
node_popup -->|"fetches marine data"| node_api
node_popup -->|"maps conditions"| node_mappings
node_popup -->|"renders forecasts"| node_chart
node_popup -->|"animates conditions"| node_animation
node_popup -->|"loads optional data"| node_aborthook
node_settingsui -->|"saves changes"| node_app
node_app -->|"loads and saves"| node_settings
node_settings -->|"persists preferences"| node_storage
node_settings -->|"reads and writes"| node_browserstore
node_cache -->|"persists responses"| node_storage
node_storage -->|"reads and writes"| node_browserstore

click node_app "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/ui/App.tsx"
click node_search "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/search/SearchBar.tsx"
click node_settingsui "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/settings/SettingsModal.tsx"
click node_popup "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/popup/WeatherPopup.tsx"
click node_chart "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/components/WeatherChart.tsx"
click node_animation "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/legacy/WeatherAnimation.ts"
click node_mapscene "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/map/MapScene.tsx"
click node_overlay "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/map/MapWeatherOverlay.ts"
click node_markerutils "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/map/markerUtils.ts"
click node_locationhook "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/hooks/useLocationIndex.ts"
click node_worker "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/locations/locations.worker.ts"
click node_locationindex "https://github.com/bariskisir/worldweathermonitor/blob/master/src/public/data/locations-index.json"
click node_locationdata "https://github.com/bariskisir/worldweathermonitor/tree/master/src/data/locations"
click node_api "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/services/weatherApi.ts"
click node_mappings "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/services/weatherMappings.ts"
click node_settings "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/app/settings.ts"
click node_storage "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/app/storage.ts"
click node_cache "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/services/cacheManager.ts"
click node_aborthook "https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/hooks/useAbortableFetch.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_search,node_settingsui,node_popup,node_chart,node_animation,node_visitor toneBlue
class node_mapscene,node_overlay,node_markerutils,node_locationhook,node_worker,node_locationindex,node_locationdata,node_browserstore toneAmber
class node_api,node_mappings,node_aborthook toneMint
class node_settings,node_storage,node_cache toneRose
class node_openmeteo toneIndigo
```

## Components

### App experience

- [App coordinator](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/ui/App.tsx): `src/react/ui/App.tsx`
- [Location search](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/search/SearchBar.tsx): `src/react/features/search/SearchBar.tsx`
- [Settings dialog](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/settings/SettingsModal.tsx): `src/react/features/settings/SettingsModal.tsx`
- [Weather details](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/popup/WeatherPopup.tsx): `src/react/features/popup/WeatherPopup.tsx`
- [Forecast charts](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/components/WeatherChart.tsx): `src/react/components/WeatherChart.tsx`
- [Weather animation](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/legacy/WeatherAnimation.ts): `src/react/legacy/WeatherAnimation.ts`

### Map and locations

- [Map and markers](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/map/MapScene.tsx): `src/react/features/map/MapScene.tsx`
- [Map weather overlay](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/map/MapWeatherOverlay.ts): `src/react/features/map/MapWeatherOverlay.ts`
- [Marker utilities](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/map/markerUtils.ts): `src/react/features/map/markerUtils.ts`
- [Location index hook](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/hooks/useLocationIndex.ts): `src/react/hooks/useLocationIndex.ts`
- [Location query worker](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/features/locations/locations.worker.ts): `src/react/features/locations/locations.worker.ts`
- [Location index](https://github.com/bariskisir/worldweathermonitor/blob/master/src/public/data/locations-index.json): `src/public/data/locations-index.json`
- [Location records](https://github.com/bariskisir/worldweathermonitor/tree/master/src/data/locations): `src/data/locations`

### Weather data

- [Weather API client](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/services/weatherApi.ts): `src/react/services/weatherApi.ts`
- [Weather mappings](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/services/weatherMappings.ts): `src/react/services/weatherMappings.ts`
- [Abortable fetch hook](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/hooks/useAbortableFetch.ts): `src/react/hooks/useAbortableFetch.ts`

### Settings and state

- [Settings and formatting](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/app/settings.ts): `src/react/app/settings.ts`
- [Local storage wrapper](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/app/storage.ts): `src/react/app/storage.ts`
- [Response cache](https://github.com/bariskisir/worldweathermonitor/blob/master/src/react/services/cacheManager.ts): `src/react/services/cacheManager.ts`

### Other components

- **Map user**
- **Open-Meteo**
- **Browser local storage**

## Connections

- Map user → App coordinator: uses app
- App coordinator → Map and markers: renders map
- App coordinator → Location search: renders search
- App coordinator → Settings dialog: renders settings
- App coordinator → Weather details: renders details
- Location search → Weather API client: searches places
- Location search → App coordinator: selects place
- App coordinator → Map and markers: focuses map
- Map and markers → Location index hook: queries locations
- Location index hook → Location query worker: posts queries
- Location query worker → Location index: fetches index
- Location records → Location index: indexed records
- Location query worker → Location index hook: returns matches
- Map and markers → Weather API client: requests marker weather
- Map and markers → Marker utilities: builds markers
- Map and markers → Map weather overlay: updates overlay
- Map and markers → Weather details: opens details
- Weather API client → Open-Meteo: fetches conditions
- Weather details → Weather API client: fetches air quality
- Weather details → Weather API client: fetches marine data
- Weather details → Weather mappings: maps conditions
- Weather details → Forecast charts: renders forecasts
- Weather details → Weather animation: animates conditions
- Weather details → Abortable fetch hook: loads optional data
- Settings dialog → App coordinator: saves changes
- App coordinator → Settings and formatting: loads and saves
- Settings and formatting → Local storage wrapper: persists preferences
- Settings and formatting → Browser local storage: reads and writes
- Response cache → Local storage wrapper: persists responses
- Local storage wrapper → Browser local storage: reads and writes