# santhoshpandi/weatherman architecture

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

- Interactive diagram: https://gitdiagram.com/santhoshpandi/weatherman
- Repository: https://github.com/santhoshpandi/weatherman

## Overview

#### Purpose and Entry Points
WeatherMAN is a Vite-served React/TypeScript single-page weather dashboard. It searches global cities, retrieves Open-Meteo geocoding and forecast data, and presents current, hourly, and daily conditions. Browser startup flows from `src/main.tsx` into the application shell in `src/App.tsx`; `index.html` is the static host document.

#### Application Composition and Navigation
`src/App.tsx` coordinates the page-level experience, primarily the dashboard and city detail views:
- `src/pages/Dashboard.tsx` is the search-and-overview workspace.
- `src/pages/CityDetails.tsx` renders detailed forecast and metric views for a selected city.
- `src/components/Navbar.tsx` provides global navigation/UI access.

The application is client-rendered and deployable as static hosting, with Vercel routing/deployment configuration in `vercel.json`.

#### State Architecture
Redux Toolkit is the central client-state boundary:
- `src/store/store.ts` assembles the Redux store.
- `src/features/citiesSlice.ts` owns searched/selected city state.
- `src/features/weatherSlice.ts` owns fetched weather data and request lifecycle state.
- `src/features/favouritesSlice.ts` persists the user’s saved-city selection in application state.
- `src/features/settingsSlice.ts` holds presentation or weather-setting preferences.

Pages and components dispatch state actions and select state rather than directly coupling UI to remote API responses.

#### Weather Retrieval Pipeline
`src/services/weatherAPI.ts` is the external-service adapter. It uses environment-provided Open-Meteo endpoints (`VITE_GEO_URL`, `VITE_WEATHER_URL`) to:
1. resolve user-entered city names into geographic coordinates;
2. request forecast/current weather for coordinates;
3. return data for weather state updates and rendering.

This layer is the intended boundary for caching, rate limiting, API failure normalization, and protecting the UI from Open-Meteo response details. `.env.example` documents the required endpoint configuration.

#### UI Data Flow and States
`src/components/SearchBar.tsx` initiates city lookup; selected city data drives weather retrieval and route/page content. `src/components/CityCard.tsx` displays city-level summary data, while `src/pages/CityDetails.tsx` consumes the richer forecast payload for detailed analytics. `src/components/SkeletonCard.tsx` and `src/components/ErrorState.tsx` isolate loading and failure states from normal weather rendering.

#### Domain Model and Presentation
`src/types/weather.ts` defines the TypeScript weather-data contract shared between the API adapter, Redux features, and UI. Styling is centralized in `src/index.css`; the stated frontend stack includes React, Redux Toolkit, TypeScript, Tailwind, and Recharts. Recharts-backed visualizations belong at the detail/dashboard presentation boundary rather than in service or state code.

#### Runtime and Infrastructure
The runtime is a browser SPA built by Vite (`vite.config.ts`) and configured through `VITE_*` environment variables. Its only named external data dependency is Open-Meteo’s geocoding/weather APIs. `vercel.json` supports static deployment on Vercel, though the build remains suitable for other static hosts.

Main entry points: [`src/pages/Dashboard.tsx`](https://github.com/santhoshpandi/weatherman/blob/main/src/pages/Dashboard.tsx) (Dashboard), [`src/store/store.ts`](https://github.com/santhoshpandi/weatherman/blob/main/src/store/store.ts) (Redux store), [`src/App.tsx`](https://github.com/santhoshpandi/weatherman/blob/main/src/App.tsx) (Application shell), [`src/services/weatherAPI.ts`](https://github.com/santhoshpandi/weatherman/blob/main/src/services/weatherAPI.ts) (Weather API adapter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser Runtime"]
  node_host["Static host document<br/>HTML entry<br/>[index.html]"]
  node_main["React bootstrap<br/>Vite entry<br/>[main.tsx]"]
end

subgraph group_ui["React UI"]
  node_app["Application shell<br/>React composition<br/>[App.tsx]"]
  node_navbar["Global navigation<br/>React component<br/>[Navbar.tsx]"]
  node_dashboard["Dashboard<br/>page<br/>[Dashboard.tsx]"]
  node_city_details["City details<br/>page<br/>[CityDetails.tsx]"]
  node_search["City search<br/>React component<br/>[SearchBar.tsx]"]
  node_city_card["City summary<br/>React component<br/>[CityCard.tsx]"]
  node_loading["Loading state<br/>React component<br/>[SkeletonCard.tsx]"]
  node_error["Failure state<br/>React component<br/>[ErrorState.tsx]"]
end

subgraph group_state["Redux State"]
  node_store[("Redux store<br/>Redux Toolkit<br/>[store.ts]")]
  node_cities["Cities state<br/>Redux slice<br/>[citiesSlice.ts]"]
  node_weather["Weather state<br/>Redux slice<br/>[weatherSlice.ts]"]
  node_favourites["Saved cities<br/>Redux slice<br/>[favouritesSlice.ts]"]
  node_settings["Weather preferences<br/>Redux slice<br/>[settingsSlice.ts]"]
end

subgraph group_data["Weather Data"]
  node_weather_api{{"Weather API adapter<br/>service adapter<br/>[weatherAPI.ts]"}}
  node_weather_types["Weather contract<br/>TypeScript model<br/>[weather.ts]"]
  node_open_meteo{{"Open-Meteo APIs<br/>external API"}}
end

node_host -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_city_details
node_dashboard -->|"uses"| node_search
node_dashboard -->|"renders"| node_city_card
node_dashboard -.->|"shows while loading"| node_loading
node_dashboard -.->|"shows on failure"| node_error
node_search -->|"dispatches lookup selection"| node_cities
node_cities -->|"selected coordinates"| node_weather_api
node_weather_api -->|"geocodes and fetches forecasts"| node_open_meteo
node_weather_api -->|"returns weather data"| node_weather
node_store -->|"assembles"| node_cities
node_store -->|"assembles"| node_weather
node_store -->|"assembles"| node_favourites
node_store -->|"assembles"| node_settings
node_dashboard -->|"selects and dispatches"| node_store
node_city_details -->|"selects and dispatches"| node_store
node_weather_api -->|"uses contract"| node_weather_types
node_weather -->|"stores contract"| node_weather_types
node_city_details -->|"renders forecast data"| node_weather_types

click node_host "https://github.com/santhoshpandi/weatherman/blob/main/index.html"
click node_main "https://github.com/santhoshpandi/weatherman/blob/main/src/main.tsx"
click node_app "https://github.com/santhoshpandi/weatherman/blob/main/src/App.tsx"
click node_navbar "https://github.com/santhoshpandi/weatherman/blob/main/src/components/Navbar.tsx"
click node_dashboard "https://github.com/santhoshpandi/weatherman/blob/main/src/pages/Dashboard.tsx"
click node_city_details "https://github.com/santhoshpandi/weatherman/blob/main/src/pages/CityDetails.tsx"
click node_search "https://github.com/santhoshpandi/weatherman/blob/main/src/components/SearchBar.tsx"
click node_city_card "https://github.com/santhoshpandi/weatherman/blob/main/src/components/CityCard.tsx"
click node_loading "https://github.com/santhoshpandi/weatherman/blob/main/src/components/SkeletonCard.tsx"
click node_error "https://github.com/santhoshpandi/weatherman/blob/main/src/components/ErrorState.tsx"
click node_store "https://github.com/santhoshpandi/weatherman/blob/main/src/store/store.ts"
click node_cities "https://github.com/santhoshpandi/weatherman/blob/main/src/features/citiesSlice.ts"
click node_weather "https://github.com/santhoshpandi/weatherman/blob/main/src/features/weatherSlice.ts"
click node_favourites "https://github.com/santhoshpandi/weatherman/blob/main/src/features/favouritesSlice.ts"
click node_settings "https://github.com/santhoshpandi/weatherman/blob/main/src/features/settingsSlice.ts"
click node_weather_api "https://github.com/santhoshpandi/weatherman/blob/main/src/services/weatherAPI.ts"
click node_weather_types "https://github.com/santhoshpandi/weatherman/blob/main/src/types/weather.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_host,node_main toneBlue
class node_app,node_navbar,node_dashboard,node_city_details,node_search,node_city_card,node_loading,node_error toneAmber
class node_store,node_cities,node_weather,node_favourites,node_settings toneMint
class node_weather_api,node_weather_types,node_open_meteo toneRose
```

## Components

### Browser Runtime

- [Static host document](https://github.com/santhoshpandi/weatherman/blob/main/index.html): HTML entry · `index.html`
- [React bootstrap](https://github.com/santhoshpandi/weatherman/blob/main/src/main.tsx): Vite entry · `src/main.tsx`

### React UI

- [Application shell](https://github.com/santhoshpandi/weatherman/blob/main/src/App.tsx): React composition · `src/App.tsx`
- [Global navigation](https://github.com/santhoshpandi/weatherman/blob/main/src/components/Navbar.tsx): React component · `src/components/Navbar.tsx`
- [Dashboard](https://github.com/santhoshpandi/weatherman/blob/main/src/pages/Dashboard.tsx): page · Search and city overview workspace. · `src/pages/Dashboard.tsx`
- [City details](https://github.com/santhoshpandi/weatherman/blob/main/src/pages/CityDetails.tsx): page · Detailed forecast and metrics view. · `src/pages/CityDetails.tsx`
- [City search](https://github.com/santhoshpandi/weatherman/blob/main/src/components/SearchBar.tsx): React component · `src/components/SearchBar.tsx`
- [City summary](https://github.com/santhoshpandi/weatherman/blob/main/src/components/CityCard.tsx): React component · `src/components/CityCard.tsx`
- [Loading state](https://github.com/santhoshpandi/weatherman/blob/main/src/components/SkeletonCard.tsx): React component · `src/components/SkeletonCard.tsx`
- [Failure state](https://github.com/santhoshpandi/weatherman/blob/main/src/components/ErrorState.tsx): React component · `src/components/ErrorState.tsx`

### Redux State

- [Redux store](https://github.com/santhoshpandi/weatherman/blob/main/src/store/store.ts): Redux Toolkit · Central client-state boundary. · `src/store/store.ts`
- [Cities state](https://github.com/santhoshpandi/weatherman/blob/main/src/features/citiesSlice.ts): Redux slice · Searched and selected cities. · `src/features/citiesSlice.ts`
- [Weather state](https://github.com/santhoshpandi/weatherman/blob/main/src/features/weatherSlice.ts): Redux slice · Forecast data and request lifecycle. · `src/features/weatherSlice.ts`
- [Saved cities](https://github.com/santhoshpandi/weatherman/blob/main/src/features/favouritesSlice.ts): Redux slice · `src/features/favouritesSlice.ts`
- [Weather preferences](https://github.com/santhoshpandi/weatherman/blob/main/src/features/settingsSlice.ts): Redux slice · `src/features/settingsSlice.ts`

### Weather Data

- [Weather API adapter](https://github.com/santhoshpandi/weatherman/blob/main/src/services/weatherAPI.ts): service adapter · Normalizes Open-Meteo access for the UI. · `src/services/weatherAPI.ts`
- [Weather contract](https://github.com/santhoshpandi/weatherman/blob/main/src/types/weather.ts): TypeScript model · Shared API, state, and UI data contract. · `src/types/weather.ts`
- **Open-Meteo APIs**: external API · Geocoding and forecast/current weather.

## Connections

- Static host document → React bootstrap: loads
- React bootstrap → Application shell: mounts
- Application shell → Global navigation: renders
- Application shell → Dashboard: routes to
- Application shell → City details: routes to
- Dashboard → City search: uses
- Dashboard → City summary: renders
- Dashboard → Loading state: shows while loading
- Dashboard → Failure state: shows on failure
- City search → Cities state: dispatches lookup selection
- Cities state → Weather API adapter: selected coordinates
- Weather API adapter → Open-Meteo APIs: geocodes and fetches forecasts
- Weather API adapter → Weather state: returns weather data
- Redux store → Cities state: assembles
- Redux store → Weather state: assembles
- Redux store → Saved cities: assembles
- Redux store → Weather preferences: assembles
- Dashboard → Redux store: selects and dispatches
- City details → Redux store: selects and dispatches
- Weather API adapter → Weather contract: uses contract
- Weather state → Weather contract: stores contract
- City details → Weather contract: renders forecast data