Building a Smart Home IoT Dashboard with ESP32 and React

# Building a Smart Home IoT Dashboard with ESP32 and React In this comprehensive tutorial, we'll build a complete IoT solution that bridges the physical and digital worlds. Our project combines ESP32 microcontrollers for sensor data collection with a React-based web dashboard for real-time monitoring and control. ## Project Overview This project demonstrates how to create a scalable IoT architecture using: - ESP32 microcontrollers for sensor interfacing - MQTT protocol for reliable communication - Node.js backend with WebSocket support - React frontend with real-time data visualization - MongoDB for historical data storage ## Hardware Requirements ### ESP32 Development Board The ESP32 is our microcontroller of choice due to its built-in Wi-Fi capabilities, dual-core processor, and extensive GPIO pins. We'll use the DOIT ESP32 DevKit V1 for this project. ### Sensors Used - **DHT22**: Temperature and humidity monitoring - **PIR Motion Sensor**: Movement detection - **MQ-2 Gas Sensor**: Air quality monitoring - **LDR (Light Dependent Resistor)**: Ambient light detection - **Relay Module**: For controlling AC appliances ## Circuit Design and Wiring The ESP32 GPIO pins are connected as follows: ``` DHT22 Data Pin → GPIO 4 PIR Motion Sensor → GPIO 5 MQ-2 Analog Output → GPIO 34 (ADC1_CH6) LDR → GPIO 35 (ADC1_CH7) Relay Control → GPIO 2 ``` **Pro Tip**: Always use pull-up resistors (10kΩ) for digital sensors to ensure stable readings and prevent floating inputs. ## ESP32 Arduino Code ```cpp #include #include #include #define DHT_PIN 4 #define DHT_TYPE DHT22 DHT dht(DHT_PIN, DHT_TYPE); WiFiClient espClient; PubSubClient client(espClient); const char* ssid = "your_wifi_ssid"; const char* password = "your_wifi_password"; const char* mqtt_server = "192.168.1.100"; void setup() { Serial.begin(115200); dht.begin(); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } client.setServer(mqtt_server, 1883); } void loop() { if (!client.connected()) { reconnect(); } client.loop(); float temp = dht.readTemperature(); float humidity = dht.readHumidity(); String payload = "{\"temperature\":" + String(temp) + ",\"humidity\":" + String(humidity) + "}"; client.publish("sensors/data", payload.c_str()); delay(30000); // Send every 30 seconds } ``` ## React Dashboard Implementation The React frontend provides real-time visualization using Chart.js and Socket.IO for displaying sensor data in interactive charts and gauges. ## Conclusion This IoT dashboard project demonstrates a complete end-to-end solution for smart home monitoring. The modular architecture allows for easy expansion with additional sensors and provides a robust foundation for IoT applications.