The challenge.
Device telemetry is frequent, uneven, and sometimes incomplete. A dashboard must show what is happening now without overwhelming the browser or disguising stale data as a healthy connection.
The proposed solution.
An MQTT ingestion service validates incoming telemetry and stores relevant history. A WebSocket gateway publishes aggregated updates to a React dashboard with explicit connection state and stale-data indicators.
Engineering scope.
- Design telemetry contracts and device identity boundaries.
- Create responsive charts and accessible device status views.
- Build ingestion validation, aggregation, and retention rules.
- Implement reconnect handling and explicit stale-data states.
The stack.
One connected system.
Connected devices
Timestamped telemetry from identified devices
MQTT ingestion
Topic authorization and payload validation
Backend services
Aggregation, history, and event processing
WebSocket gateway
Bounded update streams and reconnect support
React dashboard
Live status, historical views, and clear data freshness
Key engineering decisions.
Bursty telemetry
Aggregate and bound update frequency so chart rendering stays responsive as device traffic grows.
Out-of-order data
Track event time separately from ingestion time and define how late-arriving samples are displayed.
Disconnected devices
Show the last-seen timestamp and a distinct stale state rather than an ambiguous green indicator.
Intended outcomes.
These are design goals for this concept, not measured or delivered project results.
- An observable path from device event to dashboard.
- A responsive interface with bounded rendering work.
- Honest connection and data-freshness indicators.