Back to Projects
IntermediateIoTESP32React NativeMQTT
Smart Home Automation
A complete IoT solution to control home appliances using ESP32, MQTT, and a React Native mobile app. Features real-time monitoring and voice control.
H
By Haim Dev Team890 views
Est. 4 hours
Overview
This project allows you to transform your home into a smart home using affordable components. We use the ESP32 microcontroller to interface with relays and sensors. A MQTT broker handles the communication between the hardware and the mobile application build with React Native.
Key Features
- Voice Control via Google Assistant
- Real-time power monitoring
- Remote access from anywhere
- Automated scheduling
Schematics

Main Wiring Diagram
Connections between ESP32, Relay Module, and Sensors.
Code Repository
ESP32 Main Loop (C++)
1void loop() {
2 if (!client.connected()) {
3 reconnect();
4 }
5 client.loop();
6
7 long now = millis();
8 if (now - lastMsg > 2000) {
9 lastMsg = now;
10 float h = dht.readHumidity();
11 float t = dht.readTemperature();
12
13 // Publish to MQTT
14 char tempString[8];
15 dtostrf(t, 1, 2, tempString);
16 client.publish("esp32/temperature", tempString);
17 }
18}React Native MQTT Hook (JS)
1useEffect(() => {
2 const client = new Paho.MQTT.Client(
3 "broker.hivemq.com",
4 8000,
5 "clientId-" + parseInt(Math.random() * 100, 10)
6 );
7
8 client.onConnectionLost = onConnectionLost;
9 client.onMessageArrived = onMessageArrived;
10
11 client.connect({ onSuccess: onConnect });
12}, []);Step-by-Step Guide
3D View
Interactive 3D View
Left click to rotate • Scroll to zoom
Components (BOM)
- ESP32 Development BoardThe brain of the system, handling Wi-Fi and logic.x1
- 4-Channel Relay Modulecontrols high voltage appliances safely.x1
- DHT11 SensorFor temperature and humidity monitoring.x1
- Jumper WiresFor connections.x20
- 5V Power SupplyTo power the ESP32 and Relays.x1
