Dashboard Source Layout

The dashboard is a Vite static app in the demo repository demo repository
esp32-aws-iot-demo — source repository for firmware, provisioning scripts, Terraform, and dashboard code. Commands run from its root unless stated otherwise. under web/. Browse on GitHub: esp32-aws-iot-demo/web.

For local run and AMPLIFY AMPLIFY
AWS Amplify — hosts the walkthrough dashboard frontend and connects it to the query API URL. deploy commands, see Dashboard and Hosting. For API routes and responses, see Query API Source Layout.

Directory tree

web/
├── index.html
├── package.json
├── public/
│   └── favicon.svg
└── src/
    ├── main.js       # entry point — UI, fetch, polling
    ├── style.css
    ├── theme.js      # light/dark toggle
    ├── format.js     # timestamps, units, labels
    └── charts.js     # sparklines and stat bars

Entry point (main.js)

web/src/main.js bootstraps the single-page UI:

1. Read VITE_API_URL (build-time) — base URL for API Gateway API Gateway
   Amazon API Gateway — exposes HTTP routes for latest telemetry and recent events. The browser reads data through API Gateway, not DynamoDB directly.
2. Render device input, stat tiles, telemetry detail, network detail, events list
3. On refresh — parallel fetch to:
   • /devices/{deviceId}/telemetry/latest
   • /devices/{deviceId}/events?limit=20
4. Poll every 15 s by default (VITE_POLL_INTERVAL_MS, overridable)

Optional env vars: VITE_DEFAULT_DEVICE_ID (default esp32-c).

UI modules

File	Role
main.js	Layout, fetch orchestration, polling, live/stale pill
format.js	Human-readable timestamps, RSSI/temp/heap labels, Wi-Fi status text
charts.js	Inline SVG sparklines and stat bar visuals
theme.js	Theme persistence and toggle control
style.css	Layout and component styling

Data displayed

From latest telemetry payload (same fields as firmware contract):

• Stat tiles: RSSI, chip temperature, free heap, uptime
• Detail panels: connectivity metrics + device/network metadata (chip_model, wifi_ssid, IP, etc.)
• Events list: button presses from /events endpoint

The browser only talks to the query API — not DYNAMODB DYNAMODB
Amazon DynamoDB — persists telemetry and event records after Lambda ingest in Phase 2. (see Policies and IAM).

Build and runtime config

Local dev injects API URL at runtime:

VITE_API_URL="$(terraform -chdir=../terraform output -raw query_api_invoke_url)" npm run dev

AMPLIFY AMPLIFY
AWS Amplify — hosts the walkthrough dashboard frontend and connects it to the query API URL. deploy bakes VITE_API_URL into the static build via scripts/deploy-amplify.sh or Terraform deploy_amplify_on_apply.