Week 14 > Interface and application programming¶

group assignment: • compare as many tool options as possible

Water Purification IoT Platform¶

I want to build a production-ready IoT Water Purification Monitoring and Control Platform built using JavaScript, Node.js, Express.js, React, PostgreSQL, Docker, Nginx, and Eclipse Mosquitto MQTT, with ESP32-C3 edge devices for real-time sensing, remote control, secure data management, and analytics. The platform enables scalable monitoring, automated purification control, device management, historical analytics, alerts, OTA updates, and multi-site deployment for schools, hospitals, NGOs, and community water systems.

alt text Production-style monitoring & control platform for water purification units built on the Seeed XIAO ESP32-C3.

Stack¶

Firmware: ESP32-C3 (Arduino), Wi-Fi + MQTT, local buffering, OTA-ready
Broker: Mosquitto (MQTT)
Backend: Node.js + Express, REST API, WebSocket, JWT auth, RBAC
Database: PostgreSQL (normalized schema, auto-applied on first boot)
Frontend: React (Vite) dashboard, dark/light mode, live + historical data
Proxy: Nginx (serves frontend, proxies /api and /ws to backend)
Orchestration: Docker Compose

Technology Stack¶

Eclipse Mosquitto MQTT¶

Eclipse Mosquitto was used as the MQTT broker to provide lightweight and reliable communication between the ESP32-C3 devices and the backend server. It enables real-time transmission of sensor data and remote control commands using the publish/subscribe model.

Node.js¶

Node.js was used to develop the backend server due to its asynchronous and event-driven architecture. It processes device data, executes business logic, manages authentication, and coordinates communication between the database, MQTT broker, and dashboard.

Express.js¶

Express.js was used to build secure REST APIs for user authentication, device management, sensor data retrieval, alerts, reports, and remote device control. Its modular structure simplifies application development and maintenance.

React¶

React was used to develop a responsive web dashboard for monitoring and controlling the water purification system. It displays live sensor data, historical analytics, device status, and administrative functions through reusable components.

PostgreSQL¶

PostgreSQL was selected as the relational database for storing users, devices, sensor readings, water production records, alerts, maintenance history, and audit logs. It provides reliable and secure long-term data management.

WebSockets¶

WebSockets enable real-time communication between the backend and the dashboard. This allows live updates of sensor readings, device status, and alerts without requiring users to refresh the page.

Docker¶

Docker was used to containerize the entire application, including the frontend, backend, database, MQTT broker, and reverse proxy. This ensures consistent deployment, simplifies maintenance, and improves scalability.

Dashboard¶

alt text

Run it¶

cp .env.example .env
docker compose up --build

Then open: http://localhost:8080

Ports¶

Service	Port
Nginx (app)	8080
Backend API	4000 (internal, proxied)
Postgres	5432
MQTT (TCP)	1883
MQTT (WS)	9001

Folder layout¶

water-purifier-platform/
├── docker-compose.yml
├── .env.example
├── backend/          # Express API + MQTT ingestion + WebSocket
├── frontend/         # React dashboard (Vite)
├── mosquitto/        # Broker config + auth
├── nginx/            # Reverse proxy config
└── firmware/          # ESP32-C3 Arduino sketch

Analytics¶

alt text

Flashing the firmware¶

Open firmware/xiao_esp32c3_water_purifier/xiao_esp32c3_water_purifier.ino in Arduino IDE (install “Seeed XIAO ESP32C3” board package), edit the WIFI_SSID, WIFI_PASSWORD, MQTT_HOST and DEVICE_ID constants at the top, and upload. The device will publish telemetry to:

devices/<DEVICE_ID>/telemetry
devices/<DEVICE_ID>/status

and listen for commands on:

devices/<DEVICE_ID>/commands

See backend/src/mqtt/mqttClient.js for the full topic contract.