Arduino to Cloud

Arduino to Cloud: IoT Project Using ESP32, MQTT & React Dashboard

In this tutorial, we’ll build a full IoT system: an ESP32 (Arduino-compatible) gathers sensor data, sends it via MQTT to a broker, and then displays it in real-time on a React-powered dashboard.

1. Prerequisites

• ESP32 development board
• DHT22 or BME280 sensor
• MQTT broker (e.g. Mosquitto locally or HiveMQ Cloud)
• Node.js (backend for broker/webhook, optional)
• React app for dashboard

2. Set Up the ESP32 with Sensor

Wire the DHT22 sensor to the ESP32 (e.g., data pin → GPIO 4, power/ground accordingly). Install necessary libraries:

#include <WiFi.h>
#include <PubSubClient.h>
#include <DHT.h>

#define DHTPIN 4
#define DHTTYPE DHT22

const char* ssid = "YOUR_WIFI";
const char* pass = "YOUR_PASS";
const char* mqttServer = "broker.hivemq.com";
int mqttPort = 1883;
const char* mqttTopic = "esp32/sensor";

DHT dht(DHTPIN, DHTTYPE);
WiFiClient espClient;
PubSubClient client(espClient);

void setup() {
  Serial.begin(115200);
  dht.begin();
  WiFi.begin(ssid, pass);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  client.setServer(mqttServer, mqttPort);
}

void loop() {
  if (!client.connected()) {
    while (!client.connect("esp32Client")) {
      delay(500);
    }
  }
  float h = dht.readHumidity();
  float t = dht.readTemperature();
  if (!isnan(h) && !isnan(t)) {
    String payload = "{ \"temp\": " + String(t) + ", \"hum\": " + String(h) + " }";
    client.publish(mqttTopic, payload.c_str());
    Serial.println(payload);
  }
  client.loop();
  delay(5000);
}

3. Configure MQTT Broker

If using Mosquitto:

sudo apt update
sudo apt install mosquitto mosquitto-clients
sudo systemctl enable mosquitto
mosquitto_sub -h localhost -t "esp32/sensor"

Or use a hosted broker like HiveMQ Cloud and note the connection details.

4. Build a React Dashboard

Create a React app and install MQTT client:

npx create-react-app iot-dashboard
cd iot-dashboard
npm install mqtt

Example React code to subscribe and display data:

// src/App.js
import { useState, useEffect } from 'react';
import mqtt from 'mqtt';

function App() {
  const [data, setData] = useState({ temp: 0, hum: 0 });

  useEffect(() => {
    const client = mqtt.connect('ws://test.mosquitto.org:8080');
    client.on('connect', () => {
      client.subscribe('esp32/sensor');
    });
    client.on('message', (topic, message) => {
      setData(JSON.parse(message.toString()));
    });
    return () => client.end();
  }, []);

  return (
  <div className="dashboard">
    <h2>ESP32 Sensor Dashboard</h2>
    <p><strong>Temperature:</strong> {data.temp} °C</p>
    <p><strong>Humidity:</strong> {data.hum} %</p>
  </div>
);
}

export default App;

5. (Optional) REST API Backend

If you'd like to log data, create a Node.js/Express backend:

npm install express body-parser
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let readings = [];
app.post('/api/data', (req, res) => {
  readings.push(req.body);
  res.sendStatus(200);
});
app.get('/api/data', (req, res) => res.json(readings));
app.listen(3002, () => console.log('API on port 3002'));

Then publish ESP32 data to both MQTT and HTTP at the same time.

6. Deployment & Scaling Tips

• Use secure MQTT (WSS/TLS) for production.
• Host your dashboard on Vercel, Netlify or any static host.
• Consider authentication layers (JWT/OAuth) for private data feeds.
• For large datasets, store in a time-series DB (e.g., InfluxDB) and visualize with Grafana.

Summary

You’ve just built an end‑to‑end IoT solution: sensor on ESP32 → MQTT broker → live React dashboard—and optionally backend storage. This architecture provides a scalable foundation for real-world IoT applications.

Next up: explore data logging, alerting, OTA updates, and expanding to multiple devices!