# nishadnp/weather-app architecture

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

- Interactive diagram: https://gitdiagram.com/nishadnp/weather-app
- Repository: https://github.com/nishadnp/weather-app

## Overview

Day & Night Weather Dashboard is a vanilla-JavaScript weather and forecasting application. Its main workflow accepts a searched or current location, fetches weather, transforms the response into component-ready data, then updates the dashboard and weather-based background. The UI also presents hourly wind, multi-day forecasts, weather metrics, and sun/moon tracking. The README documents a static-map integration; its caller is not established by the sampled source, so the graph does not invent that connection. Chart and map details rely on README descriptions where source was not sampled.

Main entry points: [`src/ui/controller.js`](https://github.com/nishadnp/weather-app/blob/main/src/ui/controller.js) (Application controller), [`src/components/index.js`](https://github.com/nishadnp/weather-app/blob/main/src/components/index.js) (Dashboard components), [`src/api/weather.js`](https://github.com/nishadnp/weather-app/blob/main/src/api/weather.js) (Weather API client), [`src/components/insights.js`](https://github.com/nishadnp/weather-app/blob/main/src/components/insights.js) (Weather insights)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["User interaction"]
  node_controller["Application controller<br/>[controller.js]"]
  node_geolocation["Browser geolocation<br/>[geolocation.js]"]
end

subgraph group_weather["Weather data"]
  node_weather_api["Weather API client<br/>[weather.js]"]
  node_view_model["Weather view model"]
end

subgraph group_presentation["Dashboard and charts"]
  node_components["Dashboard components<br/>[index.js]"]
  node_header["Header view<br/>[header.js]"]
  node_sidebar["Metrics sidebar<br/>[sidebar.js]"]
  node_weather_hero["Current conditions<br/>[weatherHero.js]"]
  node_insights["Weather insights<br/>[insights.js]"]
  node_nextdays["Five-day forecast"]
  node_wind_chart["Wind chart<br/>[index.js]"]
  node_forecast_chart["Forecast chart<br/>[index.js]"]
  node_astro_chart["Celestial tracking<br/>[index.js]"]
end

subgraph group_context["Dynamic context"]
  node_background_api["Background image client"]
  node_time_vibe["Time-of-day context<br/>[time-fns.js]"]
  node_map_api["Static map URL builder<br/>[map.js]"]
end

node_user(("Dashboard user"))
node_visual_crossing(("Visual Crossing"))
node_unsplash(("Unsplash"))
node_geoapify(("Geoapify"))

node_user -->|"searches location"| node_controller
node_controller -->|"requests location"| node_geolocation
node_geolocation -->|"returns location"| node_controller
node_controller -->|"fetches weather"| node_weather_api
node_weather_api -->|"requests forecast"| node_visual_crossing
node_visual_crossing -->|"returns weather"| node_weather_api
node_weather_api -->|"returns response"| node_controller
node_controller -->|"processes response"| node_view_model
node_controller -->|"renders sections"| node_components
node_components -->|"dispatches render"| node_header
node_components -->|"dispatches render"| node_sidebar
node_components -->|"dispatches render"| node_weather_hero
node_components -->|"dispatches render"| node_insights
node_components -->|"dispatches render"| node_nextdays
node_insights -->|"renders wind"| node_wind_chart
node_insights -->|"updates position"| node_astro_chart
node_controller -->|"requests image"| node_background_api
node_controller -->|"gets time context"| node_time_vibe
node_background_api -->|"fetches image"| node_unsplash
node_map_api -.->|"builds map URL"| node_geoapify

click node_controller "https://github.com/nishadnp/weather-app/blob/main/src/ui/controller.js"
click node_geolocation "https://github.com/nishadnp/weather-app/blob/main/src/api/geolocation.js"
click node_weather_api "https://github.com/nishadnp/weather-app/blob/main/src/api/weather.js"
click node_view_model "https://github.com/nishadnp/weather-app/blob/main/src/models/weatherViewModel.js"
click node_components "https://github.com/nishadnp/weather-app/blob/main/src/components/index.js"
click node_header "https://github.com/nishadnp/weather-app/blob/main/src/components/header.js"
click node_sidebar "https://github.com/nishadnp/weather-app/blob/main/src/components/sidebar.js"
click node_weather_hero "https://github.com/nishadnp/weather-app/blob/main/src/components/weatherHero.js"
click node_insights "https://github.com/nishadnp/weather-app/blob/main/src/components/insights.js"
click node_nextdays "https://github.com/nishadnp/weather-app/blob/main/src/components/nextdaysForecast.js"
click node_wind_chart "https://github.com/nishadnp/weather-app/blob/main/src/charts/windChart/index.js"
click node_forecast_chart "https://github.com/nishadnp/weather-app/blob/main/src/charts/forecastChart/index.js"
click node_astro_chart "https://github.com/nishadnp/weather-app/blob/main/src/charts/astroObjectPosition/index.js"
click node_background_api "https://github.com/nishadnp/weather-app/blob/main/src/api/dynamicBackground.js"
click node_time_vibe "https://github.com/nishadnp/weather-app/blob/main/src/utils/time-fns.js"
click node_map_api "https://github.com/nishadnp/weather-app/blob/main/src/api/map.js"

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_controller,node_geolocation,node_user toneBlue
class node_weather_api,node_view_model toneAmber
class node_components,node_header,node_sidebar,node_weather_hero,node_insights,node_nextdays,node_wind_chart,node_forecast_chart,node_astro_chart,node_geoapify toneMint
class node_background_api,node_time_vibe,node_map_api toneRose
class node_visual_crossing,node_unsplash toneIndigo
```

## Components

### User interaction

- [Application controller](https://github.com/nishadnp/weather-app/blob/main/src/ui/controller.js): `src/ui/controller.js`
- [Browser geolocation](https://github.com/nishadnp/weather-app/blob/main/src/api/geolocation.js): `src/api/geolocation.js`

### Weather data

- [Weather API client](https://github.com/nishadnp/weather-app/blob/main/src/api/weather.js): `src/api/weather.js`
- [Weather view model](https://github.com/nishadnp/weather-app/blob/main/src/models/weatherViewModel.js): `src/models/weatherViewModel.js`

### Dashboard and charts

- [Dashboard components](https://github.com/nishadnp/weather-app/blob/main/src/components/index.js): `src/components/index.js`
- [Header view](https://github.com/nishadnp/weather-app/blob/main/src/components/header.js): `src/components/header.js`
- [Metrics sidebar](https://github.com/nishadnp/weather-app/blob/main/src/components/sidebar.js): `src/components/sidebar.js`
- [Current conditions](https://github.com/nishadnp/weather-app/blob/main/src/components/weatherHero.js): `src/components/weatherHero.js`
- [Weather insights](https://github.com/nishadnp/weather-app/blob/main/src/components/insights.js): `src/components/insights.js`
- [Five-day forecast](https://github.com/nishadnp/weather-app/blob/main/src/components/nextdaysForecast.js): `src/components/nextdaysForecast.js`
- [Wind chart](https://github.com/nishadnp/weather-app/blob/main/src/charts/windChart/index.js): `src/charts/windChart/index.js`
- [Forecast chart](https://github.com/nishadnp/weather-app/blob/main/src/charts/forecastChart/index.js): `src/charts/forecastChart/index.js`
- [Celestial tracking](https://github.com/nishadnp/weather-app/blob/main/src/charts/astroObjectPosition/index.js): `src/charts/astroObjectPosition/index.js`

### Dynamic context

- [Background image client](https://github.com/nishadnp/weather-app/blob/main/src/api/dynamicBackground.js): `src/api/dynamicBackground.js`
- [Time-of-day context](https://github.com/nishadnp/weather-app/blob/main/src/utils/time-fns.js): `src/utils/time-fns.js`
- [Static map URL builder](https://github.com/nishadnp/weather-app/blob/main/src/api/map.js): `src/api/map.js`

### Other components

- **Dashboard user**
- **Visual Crossing**
- **Unsplash**
- **Geoapify**

## Connections

- Dashboard user → Application controller: searches location
- Application controller → Browser geolocation: requests location
- Browser geolocation → Application controller: returns location
- Application controller → Weather API client: fetches weather
- Weather API client → Visual Crossing: requests forecast
- Visual Crossing → Weather API client: returns weather
- Weather API client → Application controller: returns response
- Application controller → Weather view model: processes response
- Application controller → Dashboard components: renders sections
- Dashboard components → Header view: dispatches render
- Dashboard components → Metrics sidebar: dispatches render
- Dashboard components → Current conditions: dispatches render
- Dashboard components → Weather insights: dispatches render
- Dashboard components → Five-day forecast: dispatches render
- Weather insights → Wind chart: renders wind
- Weather insights → Celestial tracking: updates position
- Application controller → Background image client: requests image
- Application controller → Time-of-day context: gets time context
- Background image client → Unsplash: fetches image
- Static map URL builder → Geoapify: builds map URL