# naseemchoudhary/pocketweatherstation architecture

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

- Interactive diagram: https://gitdiagram.com/naseemchoudhary/pocketweatherstation
- Repository: https://github.com/naseemchoudhary/pocketweatherstation

## Overview

ATMOS is a browser-based environmental sensor dashboard. Firebase Realtime Database updates drive the UI, which presents temperature, humidity, air-quality and gas-alert readings, rain status, and short rolling charts; the interface also provides theme and rain effects. Both app.js files are indexed as core modules and show similar dashboard behavior. The tree and excerpts do not establish which file is the deployed entry point or how the Arduino device publishes sensor data, so those links are not asserted.

Main entry points: [`app.js`](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js) (Dashboard listener), [`index.html`](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/index.html) (Dashboard interface), [`rainStart.mp3`](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/rainStart.mp3) (Rain sound)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ingest["Sensor data"]
  node_sensor["Sensor device<br/>[atmos.ino]"]
  node_firebase[("Realtime Database")]
end

subgraph group_dashboard["Live dashboard"]
  node_entry["Dashboard listener<br/>[app.js]"]
  node_publicapp["Dashboard listener<br/>[app.js]"]
  node_readings["Sensor readings<br/>[app.js]"]
  node_airquality["Air quality<br/>[app.js]"]
  node_alerts["Comfort and alerts<br/>[app.js]"]
  node_history["Chart history<br/>[app.js]"]
  node_charts["Trend charts<br/>[app.js]"]
  node_dashboardui["Dashboard interface<br/>[index.html]"]
end

subgraph group_presentation["Interface effects"]
  node_theme["Theme toggle<br/>[app.js]"]
  node_rain["Rain animation<br/>[app.js]"]
  node_audio["Rain sound<br/>[rainStart.mp3]"]
end

node_user(("Dashboard user"))

node_entry -->|"subscribes to"| node_firebase
node_entry -->|"updates"| node_readings
node_entry -->|"updates"| node_airquality
node_entry -->|"updates"| node_alerts
node_entry -->|"appends"| node_history
node_entry -->|"refreshes"| node_charts
node_history -->|"supplies points"| node_charts
node_entry -->|"updates"| node_dashboardui
node_entry -->|"starts or stops"| node_rain
node_rain -->|"plays"| node_audio
node_user -->|"toggles"| node_theme
node_theme -->|"restyles"| node_charts

click node_sensor "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/atmos.ino"
click node_entry "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_publicapp "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/public/app.js"
click node_readings "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_airquality "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_alerts "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_history "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_charts "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_dashboardui "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/index.html"
click node_theme "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_rain "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js"
click node_audio "https://github.com/naseemchoudhary/pocketweatherstation/blob/main/rainStart.mp3"

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_sensor,node_firebase,node_user toneBlue
class node_entry,node_publicapp,node_readings,node_airquality,node_alerts,node_history,node_charts,node_dashboardui toneAmber
class node_theme,node_rain,node_audio toneMint
```

## Components

### Sensor data

- [Sensor device](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/atmos.ino): `atmos.ino`
- **Realtime Database**

### Live dashboard

- [Dashboard listener](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Dashboard listener](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/public/app.js): `public/app.js`
- [Sensor readings](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Air quality](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Comfort and alerts](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Chart history](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Trend charts](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Dashboard interface](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/index.html): `index.html`

### Interface effects

- [Theme toggle](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Rain animation](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/app.js): `app.js`
- [Rain sound](https://github.com/naseemchoudhary/pocketweatherstation/blob/main/rainStart.mp3): `rainStart.mp3`

### Other components

- **Dashboard user**

## Connections

- Dashboard listener → Realtime Database: subscribes to (evidence: `app.js`)
- Dashboard listener → Sensor readings: updates (evidence: `app.js`)
- Dashboard listener → Air quality: updates (evidence: `app.js`)
- Dashboard listener → Comfort and alerts: updates (evidence: `app.js`)
- Dashboard listener → Chart history: appends (evidence: `app.js`)
- Dashboard listener → Trend charts: refreshes (evidence: `app.js`)
- Chart history → Trend charts: supplies points (evidence: `app.js`)
- Dashboard listener → Dashboard interface: updates (evidence: `app.js`)
- Dashboard listener → Rain animation: starts or stops (evidence: `app.js`)
- Rain animation → Rain sound: plays (evidence: `app.js`)
- Dashboard user → Theme toggle: toggles (evidence: `app.js`)
- Theme toggle → Trend charts: restyles (evidence: `app.js`)