# ace2k5/it-314-project architecture

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

- Interactive diagram: https://gitdiagram.com/ace2k5/it-314-project
- Repository: https://github.com/ace2k5/it-314-project

## Overview

WebSys is a weather-map web application for viewing weather across Manila-area locations, with zoom-dependent city/region detail and a debug panel. The main workflow is the map requesting weather through the browser API client, the FastAPI backend fetching forecasts using configured coordinates, and the map rendering weather markers. The graph also includes the separate weather-information view and status/logging capabilities. Some frontend wiring is inferred only from sampled components; DebugPanel’s implementation was not sampled.

Main entry points: [`src/backend/api/callAPI.py`](https://github.com/ace2k5/it-314-project/blob/main/src/backend/api/callAPI.py) (API routes), [`src/WebSys/src/api/receiveAPI.tsx`](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/api/receiveAPI.tsx) (API client), [`src/WebSys/src/App.tsx`](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/App.tsx) (App shell), [`src/WebSys/src/components/leaflet/Map.tsx`](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/leaflet/Map.tsx) (Weather map)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web client"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
  node_mapbutton["Map controls<br/>[MapButton.tsx]"]
  node_map["Weather map<br/>[Map.tsx]"]
  node_weatherinfo["Weather details"]
  node_debugbutton["Debug controls"]
  node_debugpanel["Status panel<br/>[DebugPanel.tsx]"]
  node_client["API client<br/>[receiveAPI.tsx]"]
end

subgraph group_backend["Backend service"]
  node_service["FastAPI app<br/>[main.py]"]
  node_routes["API routes<br/>[callAPI.py]"]
  node_models["Request models<br/>[getMessage.py]"]
  node_errors["Processing errors<br/>[errors.py]"]
  node_logger["Log setup<br/>[logger.py]"]
end

subgraph group_domain["Weather data"]
  node_locations["Location sets<br/>[locations.py]"]
end

subgraph group_integrations["External services"]
  node_weatherapi["Open-Meteo"]
  node_tiles["Map tiles"]
end

node_user(("User"))
node_browser(("Browser"))

node_user -->|"uses"| node_browser
node_browser -->|"loads"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_mapbutton
node_app -->|"renders"| node_weatherinfo
node_app -->|"renders"| node_debugbutton
node_mapbutton -->|"shows"| node_map
node_debugbutton -->|"shows"| node_debugpanel
node_map -->|"requests weather"| node_client
node_weatherinfo -->|"requests weather"| node_client
node_debugbutton -->|"logs actions"| node_client
node_debugpanel -->|"checks status"| node_client
node_client -->|"HTTP requests"| node_service
node_service -->|"registers routes"| node_routes
node_routes -->|"validates requests"| node_models
node_routes -->|"reads coordinates"| node_locations
node_routes -->|"fetches forecasts"| node_weatherapi
node_service -->|"configures logging"| node_logger
node_routes -->|"raises errors"| node_errors
node_map -->|"loads basemap"| node_tiles

click node_entry "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/main.tsx"
click node_app "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/App.tsx"
click node_mapbutton "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/leaflet/MapButton.tsx"
click node_map "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/leaflet/Map.tsx"
click node_weatherinfo "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/weather/weather_information.tsx"
click node_debugbutton "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/debug/DebugPanelButton.tsx"
click node_debugpanel "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/debug/DebugPanel.tsx"
click node_client "https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/api/receiveAPI.tsx"
click node_service "https://github.com/ace2k5/it-314-project/blob/main/src/backend/main.py"
click node_routes "https://github.com/ace2k5/it-314-project/blob/main/src/backend/api/callAPI.py"
click node_models "https://github.com/ace2k5/it-314-project/blob/main/src/backend/request_models/getMessage.py"
click node_errors "https://github.com/ace2k5/it-314-project/blob/main/src/backend/errors.py"
click node_logger "https://github.com/ace2k5/it-314-project/blob/main/src/backend/logger.py"
click node_locations "https://github.com/ace2k5/it-314-project/blob/main/src/backend/geography/locations.py"

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_entry,node_app,node_mapbutton,node_map,node_weatherinfo,node_debugbutton,node_debugpanel,node_client,node_user,node_browser toneBlue
class node_service,node_routes,node_models,node_errors,node_logger toneAmber
class node_locations toneMint
class node_weatherapi,node_tiles toneRose
```

## Components

### Web client

- [React entry](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/main.tsx): `src/WebSys/src/main.tsx`
- [App shell](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/App.tsx): `src/WebSys/src/App.tsx`
- [Map controls](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/leaflet/MapButton.tsx): `src/WebSys/src/components/leaflet/MapButton.tsx`
- [Weather map](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/leaflet/Map.tsx): `src/WebSys/src/components/leaflet/Map.tsx`
- [Weather details](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/weather/weather_information.tsx): `src/WebSys/src/components/weather/weather_information.tsx`
- [Debug controls](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/debug/DebugPanelButton.tsx): `src/WebSys/src/components/debug/DebugPanelButton.tsx`
- [Status panel](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/components/debug/DebugPanel.tsx): `src/WebSys/src/components/debug/DebugPanel.tsx`
- [API client](https://github.com/ace2k5/it-314-project/blob/main/src/WebSys/src/api/receiveAPI.tsx): `src/WebSys/src/api/receiveAPI.tsx`

### Backend service

- [FastAPI app](https://github.com/ace2k5/it-314-project/blob/main/src/backend/main.py): `src/backend/main.py`
- [API routes](https://github.com/ace2k5/it-314-project/blob/main/src/backend/api/callAPI.py): `src/backend/api/callAPI.py`
- [Request models](https://github.com/ace2k5/it-314-project/blob/main/src/backend/request_models/getMessage.py): `src/backend/request_models/getMessage.py`
- [Processing errors](https://github.com/ace2k5/it-314-project/blob/main/src/backend/errors.py): `src/backend/errors.py`
- [Log setup](https://github.com/ace2k5/it-314-project/blob/main/src/backend/logger.py): `src/backend/logger.py`

### Weather data

- [Location sets](https://github.com/ace2k5/it-314-project/blob/main/src/backend/geography/locations.py): `src/backend/geography/locations.py`

### External services

- **Open-Meteo**
- **Map tiles**

### Other components

- **User**
- **Browser**

## Connections

- User → Browser: uses
- Browser → React entry: loads
- React entry → App shell: renders
- App shell → Map controls: renders
- App shell → Weather details: renders
- App shell → Debug controls: renders
- Map controls → Weather map: shows
- Debug controls → Status panel: shows
- Weather map → API client: requests weather
- Weather details → API client: requests weather
- Debug controls → API client: logs actions
- Status panel → API client: checks status
- API client → FastAPI app: HTTP requests
- FastAPI app → API routes: registers routes
- API routes → Request models: validates requests
- API routes → Location sets: reads coordinates
- API routes → Open-Meteo: fetches forecasts
- FastAPI app → Log setup: configures logging
- API routes → Processing errors: raises errors
- Weather map → Map tiles: loads basemap
