# kulla-kukkai/skybuddy architecture

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

- Interactive diagram: https://gitdiagram.com/kulla-kukkai/skybuddy
- Repository: https://github.com/kulla-kukkai/skybuddy

## Overview

Skybuddy is a single-page weather dashboard: users start with browser geolocation or search for a city, then view current conditions and can save or switch between favorite cities. The detail routes show sunrise, sunset, UV, rain chance, and a seven-day forecast. The graph includes the shared fetch hook, API service, and favorites persistence layer. Detail-page and forecast-component wiring is based on README descriptions and paths; those source files were not sampled.

Main entry points: [`src/pages/HomePage.jsx`](https://github.com/kulla-kukkai/skybuddy/blob/main/src/pages/HomePage.jsx) (Home dashboard), [`src/pages/CityDetailPage.jsx`](https://github.com/kulla-kukkai/skybuddy/blob/main/src/pages/CityDetailPage.jsx) (City detail page), [`src/hooks/useWeatherData.js`](https://github.com/kulla-kukkai/skybuddy/blob/main/src/hooks/useWeatherData.js) (Weather data hook), [`src/App.jsx`](https://github.com/kulla-kukkai/skybuddy/blob/main/src/App.jsx) (App router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Weather experience"]
  node_app["App router<br/>[App.jsx]"]
  node_home["Home dashboard<br/>[HomePage.jsx]"]
  node_detail["City detail page<br/>[CityDetailPage.jsx]"]
  node_search["City search form<br/>[CitySearchForm.jsx]"]
  node_chips["Saved city chips<br/>[CityChipList.jsx]"]
end

subgraph group_data["Weather data"]
  node_weatherhook["Weather data hook<br/>[useWeatherData.js]"]
  node_weatherapi["Weather API service<br/>[weatherApi.js]"]
  node_weathercodes["Weather code labels<br/>[weatherCodes.js]"]
end

subgraph group_state["Favorites state"]
  node_favorites["Favorites context"]
end

subgraph group_presentation["Weather presentation"]
  node_weatherdetail["Current conditions<br/>[WeatherDetail.jsx]"]
  node_citystats["City stats<br/>[CityStats.jsx]"]
  node_forecastlist["Forecast list<br/>[ForecastList.jsx]"]
  node_forecastitem["Forecast item<br/>[ForecastItem.jsx]"]
end

node_user(("Visitor"))
node_geocoder["Open-Meteo geocoding"]
node_forecastapi["Open-Meteo forecast"]
node_geolocation["Browser geolocation"]
node_localstorage[("Browser localStorage")]

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_detail
node_home -->|"renders"| node_search
node_search -->|"submits city"| node_weatherhook
node_home -->|"loads weather"| node_weatherhook
node_detail -->|"loads weather"| node_weatherhook
node_weatherhook -->|"requests location"| node_geolocation
node_weatherhook -->|"requests weather"| node_weatherapi
node_weatherhook -->|"returns weather"| node_home
node_weatherhook -->|"returns weather"| node_detail
node_weatherapi -->|"searches city"| node_geocoder
node_weatherapi -->|"fetches forecast"| node_forecastapi
node_home -->|"renders"| node_chips
node_home -->|"reads and updates"| node_favorites
node_detail -->|"reads and updates"| node_favorites
node_favorites -->|"reads and writes"| node_localstorage
node_home -->|"renders conditions"| node_weatherdetail
node_detail -->|"renders conditions"| node_weatherdetail
node_detail -->|"renders stats"| node_citystats
node_detail -->|"renders forecast"| node_forecastlist
node_forecastlist -->|"renders items"| node_forecastitem
node_weatherdetail -->|"maps conditions"| node_weathercodes
node_forecastitem -->|"maps conditions"| node_weathercodes

click node_app "https://github.com/kulla-kukkai/skybuddy/blob/main/src/App.jsx"
click node_home "https://github.com/kulla-kukkai/skybuddy/blob/main/src/pages/HomePage.jsx"
click node_detail "https://github.com/kulla-kukkai/skybuddy/blob/main/src/pages/CityDetailPage.jsx"
click node_search "https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/CitySearchForm/CitySearchForm.jsx"
click node_chips "https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/CityChipList/CityChipList.jsx"
click node_weatherhook "https://github.com/kulla-kukkai/skybuddy/blob/main/src/hooks/useWeatherData.js"
click node_weatherapi "https://github.com/kulla-kukkai/skybuddy/blob/main/src/services/weatherApi.js"
click node_favorites "https://github.com/kulla-kukkai/skybuddy/blob/main/src/context/FavoritesContext.jsx"
click node_weatherdetail "https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/WeatherDetail/WeatherDetail.jsx"
click node_citystats "https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/CityStats/CityStats.jsx"
click node_forecastlist "https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/ForecastList/ForecastList.jsx"
click node_forecastitem "https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/ForecastItem/ForecastItem.jsx"
click node_weathercodes "https://github.com/kulla-kukkai/skybuddy/blob/main/src/utils/weatherCodes.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_app,node_home,node_detail,node_search,node_chips,node_geolocation toneBlue
class node_weatherhook,node_weatherapi,node_weathercodes,node_localstorage toneAmber
class node_favorites toneMint
class node_weatherdetail,node_citystats,node_forecastlist,node_forecastitem toneRose
class node_user,node_geocoder,node_forecastapi toneIndigo
```

## Components

### Weather experience

- [App router](https://github.com/kulla-kukkai/skybuddy/blob/main/src/App.jsx): `src/App.jsx`
- [Home dashboard](https://github.com/kulla-kukkai/skybuddy/blob/main/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [City detail page](https://github.com/kulla-kukkai/skybuddy/blob/main/src/pages/CityDetailPage.jsx): `src/pages/CityDetailPage.jsx`
- [City search form](https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/CitySearchForm/CitySearchForm.jsx): `src/components/CitySearchForm/CitySearchForm.jsx`
- [Saved city chips](https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/CityChipList/CityChipList.jsx): `src/components/CityChipList/CityChipList.jsx`

### Weather data

- [Weather data hook](https://github.com/kulla-kukkai/skybuddy/blob/main/src/hooks/useWeatherData.js): `src/hooks/useWeatherData.js`
- [Weather API service](https://github.com/kulla-kukkai/skybuddy/blob/main/src/services/weatherApi.js): `src/services/weatherApi.js`
- [Weather code labels](https://github.com/kulla-kukkai/skybuddy/blob/main/src/utils/weatherCodes.js): `src/utils/weatherCodes.js`

### Favorites state

- [Favorites context](https://github.com/kulla-kukkai/skybuddy/blob/main/src/context/FavoritesContext.jsx): `src/context/FavoritesContext.jsx`

### Weather presentation

- [Current conditions](https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/WeatherDetail/WeatherDetail.jsx): `src/components/WeatherDetail/WeatherDetail.jsx`
- [City stats](https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/CityStats/CityStats.jsx): `src/components/CityStats/CityStats.jsx`
- [Forecast list](https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/ForecastList/ForecastList.jsx): `src/components/ForecastList/ForecastList.jsx`
- [Forecast item](https://github.com/kulla-kukkai/skybuddy/blob/main/src/components/ForecastItem/ForecastItem.jsx): `src/components/ForecastItem/ForecastItem.jsx`

### Other components

- **Visitor**
- **Open-Meteo geocoding**
- **Open-Meteo forecast**
- **Browser geolocation**
- **Browser localStorage**

## Connections

- Visitor → App router: opens
- App router → Home dashboard: routes to
- App router → City detail page: routes to
- Home dashboard → City search form: renders
- City search form → Weather data hook: submits city
- Home dashboard → Weather data hook: loads weather
- City detail page → Weather data hook: loads weather
- Weather data hook → Browser geolocation: requests location
- Weather data hook → Weather API service: requests weather
- Weather data hook → Home dashboard: returns weather
- Weather data hook → City detail page: returns weather
- Weather API service → Open-Meteo geocoding: searches city
- Weather API service → Open-Meteo forecast: fetches forecast
- Home dashboard → Saved city chips: renders
- Home dashboard → Favorites context: reads and updates
- City detail page → Favorites context: reads and updates
- Favorites context → Browser localStorage: reads and writes
- Home dashboard → Current conditions: renders conditions
- City detail page → Current conditions: renders conditions
- City detail page → City stats: renders stats
- City detail page → Forecast list: renders forecast
- Forecast list → Forecast item: renders items
- Current conditions → Weather code labels: maps conditions
- Forecast item → Weather code labels: maps conditions