# sardarabdullahg/weather-app architecture

> Architecture diagram of the GitHub repository sardarabdullahg/weather-app, 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/sardarabdullahg/weather-app
- Repository: https://github.com/sardarabdullahg/weather-app

## Overview

This is a small Express weather web app. A user submits a location in the browser; the server geocodes it, requests current conditions, and returns a result for display. The server also renders informational and error pages and exposes a placeholder products endpoint. The tree and sampled source establish the weather flow; unsampled template and asset details are represented only by their enclosing paths.

Main entry points: [`src/app.js`](https://github.com/sardarabdullahg/weather-app/blob/main/src/app.js) (Express app), [`public/js/app.js`](https://github.com/sardarabdullahg/weather-app/blob/main/public/js/app.js) (Weather client), [`src/utils/geocode.js`](https://github.com/sardarabdullahg/weather-app/blob/main/src/utils/geocode.js) (Geocoding), [`src/utils/forecast.js`](https://github.com/sardarabdullahg/weather-app/blob/main/src/utils/forecast.js) (Forecast lookup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser"]
  node_client["Weather client<br/>[app.js]"]
  node_static["Static assets"]
end

subgraph group_server["Web server"]
  node_app["Express app<br/>[app.js]"]
  node_views["Page views"]
  node_partials["Shared partials"]
  node_geocode["Geocoding<br/>[geocode.js]"]
  node_forecast["Forecast lookup<br/>[forecast.js]"]
end

subgraph group_integrations["Weather services"]
  node_mapbox["Mapbox geocoding"]
  node_weatherstack["Weatherstack API"]
end

node_user(("Visitor"))

node_user -->|"submits location"| node_client
node_client -->|"requests weather"| node_app
node_app -->|"calls"| node_geocode
node_geocode -->|"requests coordinates"| node_mapbox
node_mapbox -->|"returns location"| node_geocode
node_app -->|"calls with coordinates"| node_forecast
node_forecast -->|"requests conditions"| node_weatherstack
node_weatherstack -->|"returns conditions"| node_forecast
node_app -->|"returns result"| node_client
node_client -->|"displays result"| node_user
node_app -->|"renders pages"| node_views
node_app -->|"registers partials"| node_partials
node_app -->|"serves assets"| node_static
node_user -->|"requests pages"| node_app

click node_client "https://github.com/sardarabdullahg/weather-app/blob/main/public/js/app.js"
click node_static "https://github.com/sardarabdullahg/weather-app/tree/main/public"
click node_app "https://github.com/sardarabdullahg/weather-app/blob/main/src/app.js"
click node_views "https://github.com/sardarabdullahg/weather-app/tree/main/templates/views"
click node_partials "https://github.com/sardarabdullahg/weather-app/tree/main/templates/partials"
click node_geocode "https://github.com/sardarabdullahg/weather-app/blob/main/src/utils/geocode.js"
click node_forecast "https://github.com/sardarabdullahg/weather-app/blob/main/src/utils/forecast.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_client,node_static toneBlue
class node_app,node_views,node_partials,node_geocode,node_forecast toneAmber
class node_mapbox,node_weatherstack toneMint
class node_user toneIndigo
```

## Components

### Browser

- [Weather client](https://github.com/sardarabdullahg/weather-app/blob/main/public/js/app.js): `public/js/app.js`
- [Static assets](https://github.com/sardarabdullahg/weather-app/tree/main/public): `public`

### Web server

- [Express app](https://github.com/sardarabdullahg/weather-app/blob/main/src/app.js): `src/app.js`
- [Page views](https://github.com/sardarabdullahg/weather-app/tree/main/templates/views): `templates/views`
- [Shared partials](https://github.com/sardarabdullahg/weather-app/tree/main/templates/partials): `templates/partials`
- [Geocoding](https://github.com/sardarabdullahg/weather-app/blob/main/src/utils/geocode.js): `src/utils/geocode.js`
- [Forecast lookup](https://github.com/sardarabdullahg/weather-app/blob/main/src/utils/forecast.js): `src/utils/forecast.js`

### Weather services

- **Mapbox geocoding**
- **Weatherstack API**

### Other components

- **Visitor**

## Connections

- Visitor → Weather client: submits location
- Weather client → Express app: requests weather
- Express app → Geocoding: calls
- Geocoding → Mapbox geocoding: requests coordinates
- Mapbox geocoding → Geocoding: returns location
- Express app → Forecast lookup: calls with coordinates
- Forecast lookup → Weatherstack API: requests conditions
- Weatherstack API → Forecast lookup: returns conditions
- Express app → Weather client: returns result
- Weather client → Visitor: displays result
- Express app → Page views: renders pages
- Express app → Shared partials: registers partials
- Express app → Static assets: serves assets
- Visitor → Express app: requests pages