How to make a IOT Based smart Home Automation system using NodeMCU ESP8266 with a Web server
Hello and welcome back. In this project, we will learn how to make a smart home automation system using the NodeMCU ESP8266 board. This is a Wi-Fi-supported board, and we can use it for many IoT-based projects. With this system, we can control two electronic devices over a local area network using a simple web browser. For that, I used two relay modules to control the devices. You can connect any electronic device to them, but make sure to match the correct ampere value. In this project, I connected two AC bulbs for testing purposes. You can also connect other devices like fans, an Air conditioner, or bulbs.
I designed a simple web server on the NodeMCU board to control the system. So, we don’t need to install any app. We just need to open a browser and enter the IP address. Then, we can turn the devices ON or OFF with a single click. It works on both computers and mobile phones. Also, I designed a PCB for this project using JLCPCB. With this PCB, we can easily connect all the components without using jumper wires. It makes the system more compact and professional.
Ok, let’s do this project step by step. The required components are given below.
- Nodemcu ESP8266 board x 1 — Our store / Amazon
- 3v Relay x 2 — Our store / Amazon
- LCD screen x 1 — Our store / Amazon
- Female header x 2 — Our store / Amazon
- Three-pin terminal x 2 — Our store / Amazon
- Two-pin terminal x 1 — Our Store / Amazon
- 103 / 104 Variable resistor x 1 — Our store / Amazon
- 100 ohm Resistor x 1 — Our Store / Amazon
- 102 SMD Resistor x 5 — Our store / Amazon
- 2A Transistor x 2 — Our store / Amazon
- 1N4148 diode x 2 — Our store / Amazon
- Red SMD LED x 1 — Our store / Amazon
- Green SMD LED x 2 — Our store / Amazon
- Bulb holder x 2 — Our store / Amazon
- Bulb x 2 — Our store / Amazon
Disclosure: These Amazon links are Affiliate links. As an Amazon Associate, I earn from qualifying purchases.
Step 1
Firstly, identify these components.
Step 2
Secondly, let’s order PCBs for this project.
- Click the “Instant Quote” button and upload the Gerber file, which you can download from the link below.
- Gerber file – Download
- For this project, I ordered five Red PCBs. Next, select the build time and shipping method. Finally, click “Save to Cart” and complete the payment.
Step 3
Thirdly, unbox your PCB package.
Step 4
Now, let’s solder the SMD components first. For that, I used a hot air gun.
Step 5
Next, solder the other components using a soldering iron. Then, clean the PCB using a suitable cleaner.
Step 6
Now, connect the NodeMCU board and LCD screen to the PCB. Then, connect your system to the computer.
Step 7
Afterward, copy and paste the following program into the Arduino IDE.
#include <ESP8266WiFi.h>
#include <LiquidCrystal.h>
LiquidCrystal lcd(D2, D3, D4, D5, D6, D7);
const char* ssid = "**************"; //Enter your WIFI SSID
const char* password = "***************"; //Enter your password
WiFiServer server(80);
String output1State = "off";
String output2State = "off";
const int relay1 = D0;
const int relay2 = D1;
void setup() {
Serial.begin(115200);
lcd.begin(16, 2);
pinMode(relay1, OUTPUT);
pinMode(relay2, OUTPUT);
digitalWrite(relay1, HIGH);
digitalWrite(relay2, HIGH);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
lcd.setCursor(1, 0);
lcd.print("System Loading");
for (int a = 0; a <= 15; a++) {
lcd.setCursor(a, 1);
lcd.print(".");
delay(200);
}
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("Relay1: " + output1State + " ");
lcd.setCursor(0, 1);
lcd.print("Relay2: " + output2State + " ");
}
void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("New Client.");
String header = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
header += c;
if (header.endsWith("\r\n\r\n")) break;
}
}
// Handle relay toggles
if (header.indexOf("GET /0/on") >= 0) {
output1State = "on";
digitalWrite(relay1, LOW);
} else if (header.indexOf("GET /0/off") >= 0) {
output1State = "off";
digitalWrite(relay1, HIGH);
}
if (header.indexOf("GET /1/on") >= 0) {
output2State = "on";
digitalWrite(relay2, LOW);
} else if (header.indexOf("GET /1/off") >= 0) {
output2State = "off";
digitalWrite(relay2, HIGH);
}
// Update LCD
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("Relay1: " + output1State + " ");
lcd.setCursor(0, 1);
lcd.print("Relay2: " + output2State + " ");
// Handle AJAX status request
if (header.indexOf("GET /status") >= 0) {
int signal = WiFi.RSSI();
String status = "{";
status += "\"relay1\":\"" + output1State + "\",";
status += "\"relay2\":\"" + output2State + "\",";
status += "\"ip\":\"" + WiFi.localIP().toString() + "\",";
status += "\"rssi\":\"" + String(signal) + "\"}";
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/json");
client.println("Connection: close");
client.println();
client.println(status);
} else {
// Main HTML Page
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1'>");
client.println("<style>");
// Body styling
client.println("body { font-family: Arial, sans-serif; background: #121212; color: white; text-align: center; padding: 0; margin: 0; }");
// Header with subtle glow animation
client.println("h1 { margin: 20px 0; font-size: 32px; font-weight: bold; color: #00ffc3;");
client.println("text-shadow: 0 0 10px #00ffc3, 0 0 20px #00ffc3;");
client.println("animation: headerGlow 3s ease-in-out infinite alternate; display: flex; justify-content: center; align-items: center; }");
// Icon spacing in header
client.println("h1 span { margin-left: 10px; font-size: 32px; }");
// Card styling
client.println(".card { background: #1e1e1e; border-radius: 12px; padding: 20px; margin: 20px auto; width: 90%; max-width: 400px; box-shadow: 0 0 12px rgba(0,0,0,0.5); }");
client.println(".status { font-size: 20px; margin: 10px 0; }");
// Buttons
client.println(".button { background: #00c853; border: none; border-radius: 8px; color: white; padding: 14px 28px; font-size: 18px; margin: 10px; cursor: pointer; transition: 0.3s; }");
client.println(".button:hover { background: #00e676; }");
client.println(".button2 { background: #d50000; }");
client.println(".button2:hover { background: #ff1744; }");
// Footer animation
client.println(".footer { margin-top: 40px; font-size: 14px; color: #888; animation: glow 2s ease-in-out infinite alternate; }");
// Keyframes for header glow
client.println("@keyframes headerGlow {");
client.println(" from { text-shadow: 0 0 10px #00ffc3, 0 0 20px #00ffc3; color: #00ffc3; }");
client.println(" to { text-shadow: 0 0 20px #00ffc3, 0 0 40px #00ffc3; color: #00fff0; }");
client.println("}");
// Keyframes for footer glow
client.println("@keyframes glow {");
client.println(" from { text-shadow: 0 0 5px #00ffc3; color: #aaa; }");
client.println(" to { text-shadow: 0 0 20px #00ffc3, 0 0 30px #00ffc3; color: #fff; }");
client.println("}");
client.println("</style>");
client.println("<script>");
client.println("setInterval(() => {");
client.println("fetch('/status').then(res => res.json()).then(data => {");
client.println("document.getElementById('r1').innerHTML = (data.relay1 == 'on' ? '💡 ON' : '💡 OFF');");
client.println("document.getElementById('r2').innerHTML = (data.relay2 == 'on' ? '💡 ON' : '💡 OFF');");
client.println("document.getElementById('ip').innerHTML = 'IP: ' + data.ip;");
client.println("document.getElementById('signal').innerHTML = 'Signal: ' + data.rssi + ' dBm';");
client.println("}); }, 3000);");
client.println("</script></head><body>");
client.println("<h1>Smart Home Control</h1>");
// Relay 1 Card
client.println("<div class='card'>");
client.println("<div class='status' id='r1'>💡 " + output1State + "</div>");
if (output1State == "off") {
client.println("<a href='/0/on'><button class='button'>Turn ON</button></a>");
} else {
client.println("<a href='/0/off'><button class='button button2'>Turn OFF</button></a>");
}
client.println("</div>");
// Relay 2 Card
client.println("<div class='card'>");
client.println("<div class='status' id='r2'>💡 " + output2State + "</div>");
if (output2State == "off") {
client.println("<a href='/1/on'><button class='button'>Turn ON</button></a>");
} else {
client.println("<a href='/1/off'><button class='button button2'>Turn OFF</button></a>");
}
client.println("</div>");
// IP and RSSI
client.println("<div class='card'>");
client.println("<div class='status' id='ip'>IP: " + WiFi.localIP().toString() + "</div>");
client.println("<div class='status' id='signal'>Signal: " + String(WiFi.RSSI()) + " dBm</div>");
client.println("</div>");
// Footer Credit with animation
client.println("<div class='footer'>");
client.println("Developed by <strong>SRITU HOBBY</strong>");
client.println("</div>");
client.println("</body></html>");
}
delay(1);
client.stop();
Serial.println("Client Disconnected.");
}
}- Now, enter your Wi-Fi name and password.
- Next, select the correct board and port. After that, click the upload button. If you haven’t installed the NodeMCU boards, please add this URL to the Additional Board Manager URLs. Then, open the Board Manager and install the NodeMCU board package.
- http://arduino.esp8266.com/stable/package_esp8266com_index.json
Step 8
Next, open the Serial Monitor. Then, you will see the local IP address.
Step 9
Afterward, remove the USB cable and provide a 5V DC power supply to the system. But you can also run the system using USB power. For this project, I connected two AC bulbs. For that, use the circuit diagram below. You have to be careful when working with AC voltage.
Step 10
Finally, enter your IP address into your favorite browser. Then you will see the web server interface, and you can control the bulbs using it. You can test it using your computer or smartphone. OK, enjoy this project! The full video guide is below. So, we hope to see you in the next project.
IoT-based smart home automation system using NodeMCU ESP8266 with a web server
