Home Automation Made Easy: Create Your Own IoT Cloud with a Custom Web Dashboard Using Firebase

Home Automation Made Easy: Create Your Own IoT Cloud with a Custom Web Dashboard Using Firebase

IoT Projects Home Automation ESP32 Projects Tags:

Home automation is one of the most exciting applications of the Internet of Things (IoT).
In this project, we’ll design a complete smart home system where users can control appliances (like lights, fans, or LEDs) directly from a custom-built web dashboard, powered by Google Firebase — all connected to an ESP32 board.

Unlike typical IoT platforms (like Blynk or ThingsBoard), this project will show you how to build your own personal IoT cloud.
You’ll host the data on Firebase, create a web dashboard to monitor and control devices, and manage everything remotely in real time.

This is perfect for:

  • 🏠 Home automation
  • ⚙️ IoT learning
  • 🌍 Custom web app development
  • 🔌 Smart IoT solutions for clients

💡 2. What You’ll Learn

By the end of this project, you’ll understand:

  • How to connect ESP32 to Firebase Realtime Database
  • How to send and receive data between ESP32 and Firebase
  • How to design a web dashboard using HTML, CSS, and JavaScript
  • How to securely control appliances via the cloud
  • How to manage real-time communication between multiple devices

⚙️ 3. Hardware Required

ComponentQuantityDescription
ESP32 Dev Board1WiFi + Bluetooth enabled microcontroller
Relay Module1–4 channelsTo control AC appliances
LEDs or Light Bulbs2–3Simulated loads for demo
Jumper WiresFor connections
Power Supply5VTo power ESP32 and relays

💻 4. Software Required

ToolPurpose
Arduino IDEProgramming ESP32
Firebase ConsoleHosting IoT cloud database
Web BrowserAccessing your control dashboard
VS Code / SublimeDesigning the web UI

🌐 5. Project Workflow

Here’s how the system works:

  1. The ESP32 connects to WiFi and synchronizes with the Firebase Realtime Database.
  2. The Web Dashboard communicates with the same Firebase database.
  3. When you toggle a switch on the web dashboard, the data in Firebase updates instantly.
  4. ESP32 reads this updated data and turns the relay ON/OFF in real time.
  5. Similarly, if a sensor updates data, you can visualize it on the web dashboard instantly.

Result:
Your home automation system becomes fully cloud-controlled, accessible from anywhere — laptop, phone, or tablet!


📶 6. Firebase Realtime Database Overview

Firebase Realtime Database stores and syncs data in JSON format, like this:

{
  "LED1": "ON",
  "LED2": "OFF"
}

When the web app changes LED1 to OFF, ESP32 sees the change instantly and turns the light off.


7. Why Use Firebase?

  • Free for small IoT projects
  • Real-time database with instant sync
  • No external servers or complex APIs needed
  • Works with both web apps and microcontrollers
  • Simple REST API for HTTP requests

📲 8. Project Demo Flow

ActionTriggerResult
Web dashboard button ONFirebase value = “ON”ESP32 turns relay ON
Web dashboard button OFFFirebase value = “OFF”ESP32 turns relay OFF
ESP32 sensor value changesFirebase auto-updatesWeb dashboard refreshes instantly

🧠 9. Next Steps

In Part 2, we’ll cover:

  • Firebase setup and connection
  • ESP32 code for real-time control
  • Authentication and API key configuration

🔹 Step 1: Setting Up Firebase Project

To begin, go to https://console.firebase.google.com and follow these steps:

  1. Click “Add Project” → Enter your project name, e.g., HomeAutomationFirebase.
  2. Disable Google Analytics (optional) → Click Create Project.
  3. Once your project is ready, click Continue.
  4. On the left sidebar, click Build → Realtime Database.
  5. Click Create Database → Choose your region → Select Start in Test Mode → Enable.

Now your Firebase Realtime Database is live! You’ll see an empty JSON structure.


🔹 Step 2: Copy Database URL

In the Realtime Database tab, copy your Database URL — it looks like this:

https://homeautomationfirebase-default-rtdb.firebaseio.com/

We’ll use this URL inside the ESP32 code.


🔹 Step 3: Get Firebase Secret Key

  1. In the Firebase Console, go to Project Settings → Service Accounts → Database Secrets.
  2. Copy the Secret Key — this acts as your authentication password.

🔹 Step 4: Add ESP32 to Arduino IDE

  1. Open Arduino IDE → Go to File → Preferences.
  2. In Additional Boards Manager URLs, paste: https://dl.espressif.com/dl/package_esp32_index.json
  3. Now go to Tools → Board → Boards Manager → Search for ESP32 → Install.
  4. Select your board: Tools → Board → ESP32 Dev Module

🔹 Step 5: Install Required Libraries

In Arduino IDE, install the following libraries:

  • Firebase ESP Client by Mobizt
  • WiFi.h (pre-installed)

To install manually:

Sketch → Include Library → Manage Libraries

Then search and install Firebase ESP Client.


🔹 Step 6: Circuit Connection

ESP32 PinComponentDescription
GPIO 2LEDOutput LED for testing
5VRelay VCCRelay power
GNDRelay GNDGround
GPIO 5Relay IN1Control signal

You can extend this to multiple GPIO pins for more appliances.


🔹 Step 7: Arduino Code

Here’s the complete ESP32 Firebase control code 👇

/***************************************************
   Home Automation with Firebase + ESP32
   Created by YaranaIoT Guru
****************************************************/

#include <WiFi.h>
#include <FirebaseESP32.h>

#define WIFI_SSID "Your_WiFi_Name"
#define WIFI_PASSWORD "Your_WiFi_Password"

#define FIREBASE_HOST "https://your-project-id.firebaseio.com/"
#define FIREBASE_AUTH "Your_Firebase_Database_Secret"

FirebaseData fbdo;

int ledPin = 2;
int relayPin = 5;
String ledStatus;

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  pinMode(relayPin, OUTPUT);

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  Serial.println("\nWiFi connected!");
  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
  Firebase.reconnectWiFi(true);
}

void loop() {
  if (Firebase.getString(fbdo, "/Home/LED")) {
    ledStatus = fbdo.stringData();
    Serial.println("LED Status: " + ledStatus);
    if (ledStatus == "ON") {
      digitalWrite(ledPin, HIGH);
      digitalWrite(relayPin, HIGH);
    } else {
      digitalWrite(ledPin, LOW);
      digitalWrite(relayPin, LOW);
    }
  } else {
    Serial.println("Error Reading Data: " + fbdo.errorReason());
  }

  delay(1000);
}

🔹 How It Works

  • ESP32 connects to WiFi and Firebase.
  • It checks the Firebase path /Home/LED every second.
  • If the value is “ON”, the LED and relay are powered.
  • If the value is “OFF”, they turn off.
  • You can change the data manually from Firebase or the web dashboard.

🔹 Testing in Firebase

In your Firebase Realtime Database, create a new structure:

{
  "Home": {
    "LED": "OFF"
  }
}

Now, if you change the value from “OFF” → “ON”, your ESP32 LED should turn ON instantly!

💡 Goal of This Section

We’ll create a web interface that:

  1. Displays the current status of devices (ON/OFF)
  2. Lets you control appliances (like LEDs, relays, or fans)
  3. Updates Firebase instantly when you toggle a switch
  4. Reflects any ESP32 status change on the webpage automatically

🧩 Step 1: Setting Up Firebase for Web Access

Before coding the web page, we must get the Firebase configuration for web use.

  1. Go to your Firebase Console → Project Settings → General Tab
  2. Scroll down to Your Apps → Click </> (Add App)
  3. Enter a name like WebDashboardApp → Click Register App
  4. Copy the Firebase configuration code. It looks like this:
const firebaseConfig = {
  apiKey: "AIzaSyDxxxxxx",
  authDomain: "your-project-id.firebaseapp.com",
  databaseURL: "https://your-project-id-default-rtdb.firebaseio.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "111111111111",
  appId: "1:111111111111:web:xxxxxxxxxx"
};

We’ll use this inside our HTML file to connect the web dashboard with Firebase.


💻 Step 2: Creating the Web Dashboard (HTML + CSS + JS)

Create a file named index.html and paste the following complete code 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YaranaIoT Guru - Smart Home Dashboard</title>

  <!-- Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js"></script>

  <style>
    body {
      background: #0f172a;
      color: white;
      font-family: 'Poppins', sans-serif;
      text-align: center;
    }
    h1 {
      margin-top: 30px;
      color: #22d3ee;
    }
    .device {
      background: #1e293b;
      padding: 20px;
      border-radius: 12px;
      display: inline-block;
      margin: 20px;
      width: 250px;
      box-shadow: 0 0 15px #22d3ee33;
    }
    button {
      background: #22d3ee;
      color: black;
      border: none;
      border-radius: 10px;
      padding: 10px 25px;
      cursor: pointer;
      font-weight: bold;
      font-size: 16px;
      transition: 0.3s;
    }
    button:hover {
      background: #06b6d4;
    }
    .status {
      margin-top: 10px;
      font-size: 18px;
      color: #a3e635;
    }
  </style>
</head>
<body>
  <h1>🏠 YaranaIoT Guru - Smart Home Automation</h1>
  <h3>Control Devices via Firebase IoT Cloud</h3>

  <div class="device">
    <h2>💡 LED Light</h2>
    <button id="ledOn">Turn ON</button>
    <button id="ledOff">Turn OFF</button>
    <p class="status" id="ledStatus">Status: Loading...</p>
  </div>

  <script type="module">
    // Firebase Config
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
    import { getDatabase, ref, set, onValue } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js";

    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "your-project-id.firebaseapp.com",
      databaseURL: "https://your-project-id-default-rtdb.firebaseio.com",
      projectId: "your-project-id",
      storageBucket: "your-project-id.appspot.com",
      messagingSenderId: "111111111111",
      appId: "1:111111111111:web:xxxxxxxxxx"
    };

    const app = initializeApp(firebaseConfig);
    const db = getDatabase(app);

    const ledStatus = document.getElementById("ledStatus");
    const ledOn = document.getElementById("ledOn");
    const ledOff = document.getElementById("ledOff");

    // Realtime Status Update
    const ledRef = ref(db, "Home/LED");
    onValue(ledRef, (snapshot) => {
      const data = snapshot.val();
      ledStatus.innerText = "Status: " + data;
    });

    // Button Controls
    ledOn.addEventListener("click", () => {
      set(ref(db, "Home/LED"), "ON");
    });
    ledOff.addEventListener("click", () => {
      set(ref(db, "Home/LED"), "OFF");
    });
  </script>
</body>
</html>

🌍 Step 3: Testing the Web Dashboard

  1. Save the HTML file as index.html.
  2. Open it in any browser (Chrome, Edge, etc.).
  3. Ensure your Firebase credentials are correctly pasted.
  4. When you click Turn ON, the Firebase value /Home/LED changes to "ON".
  5. Your ESP32 instantly receives the change and turns on the LED or relay.

Result: You now have a custom IoT cloud web dashboard hosted locally or on your web server!


💡 Step 4: Add Multiple Devices (Optional)

You can easily expand this dashboard for multiple appliances:

/Home/Fan = "OFF"
/Home/Lamp = "ON"
/Home/DoorLock = "LOCKED"

Then, duplicate the HTML block for each device, just like the first LED section — changing their Firebase paths accordingly.


⚙️ Step 5: Hosting Your Dashboard (Optional)

If you want to access the dashboard from anywhere:

  • Use Firebase Hosting (built-in hosting service)
  • Or deploy it on GitHub Pages / Netlify / Vercel
  • Just upload your index.html file and link it with your Firebase database

Your IoT dashboard is now available globally! 🌎

🧩 Step 10: Testing the Firebase IoT Cloud Dashboard

Now that your web dashboard is ready and connected to Firebase, it’s time to test everything in action!

  1. Upload your ESP32 code to the board.
    • Ensure your Wi-Fi credentials and Firebase details are correct.
    • Open Serial Monitor at 115200 baud to see connection logs.
  2. ESP32 connects to Wi-Fi and Firebase:
    Once it connects, you’ll see messages like: WiFi connected! Firebase connection successful. Listening for changes...
  3. Test real-time control:
    • Open your web dashboard.
    • Click the ON/OFF button to control the connected LED, relay, or device.
    • Instantly, the state will update on both the dashboard and Firebase.
  4. Check live data updates:
    • When you change the switch manually on the ESP32 (or through another device), Firebase updates in real-time.
    • You can even open your dashboard on two different devices, and both will stay in sync instantly.

⚙️ Step 11: Troubleshooting Common Issues

Even well-built IoT systems can face minor issues. Here’s how to fix the most common ones:

  • ❌ Firebase not connecting
    • Recheck your Firebase host URL and database secret.
    • Ensure your Firebase rules allow read/write access during testing.
    • Make sure the Wi-Fi connection is stable.
  • ⚡ ESP32 not responding to dashboard
    • Confirm that your database path in the code matches your Firebase structure.
    • Use Serial Monitor to see debug prints.
    • Try restarting both the ESP32 and Firebase app.
  • 🌐 Dashboard not updating automatically
    • Check if you’re using Firebase Realtime Database, not Firestore.
    • Refresh your browser or clear cache.
    • Make sure your HTML/JS script includes the correct Firebase SDK links.
  • 🔌 Device reboots repeatedly
    • Power your ESP32 with a stable 5V/2A supply (not just USB power from laptop).
    • Avoid using long jumper wires for relays or motors.

🌍 Step 12: Expanding Your IoT Cloud

Once your system works, you can scale it into a complete IoT ecosystem:

  1. Add more devices
    • Connect more GPIOs or sensors (like temperature, motion, or humidity sensors).
    • Update your Firebase structure for multiple nodes like: Devices/ ├── Light1/ ├── Fan/ ├── Door/
  2. Add User Authentication
    • Use Firebase Email/Password or Google Sign-In.
    • Each user can control only their assigned devices.
  3. Enable Voice Control
    • Integrate with Google Assistant or Alexa using IFTTT or Adafruit IO Bridge.
    • Control your Firebase devices using voice commands.
  4. Mobile App Integration
    • Build a Flutter or MIT App Inventor app connected to Firebase.
    • Sync real-time device status across web and mobile.

🧪 Step 13: Advanced Features You Can Add

If you want to make your system more powerful and smart:

  • Scheduling Automation:
    • Add a real-time clock (RTC) or NTP time sync to schedule actions (like turning ON lights at sunset).
  • Energy Monitoring:
    • Use a current sensor (ACS712) and log energy data to Firebase for analytics.
  • Notifications:
    • Use Firebase Cloud Messaging (FCM) to send alerts to your phone when a device turns ON/OFF.
  • Security & Encryption:
    • Enable HTTPS (TLS) connection for Firebase.
    • Add password protection to the dashboard.

💡 Step 14: Real-World Applications

This DIY IoT Cloud setup using Firebase isn’t just a project — it’s the base for commercial-grade smart home systems. You can implement it in:

  • 🏠 Smart Homes (light/fan/AC automation)
  • 🏢 Office Energy Control
  • 🌾 Smart Farming Systems (water pumps, soil sensors)
  • 🏫 School & College IoT Labs
  • 🧑‍🔬 Industrial IoT Prototyping

With Firebase’s scalability, you can control hundreds of devices with a single, synchronized cloud database — all without using paid servers.


🧰 Step 15: Final Thoughts and Takeaways

This entire journey — from setting up Firebase to building a responsive web dashboard — teaches key IoT principles:

  • Cloud integration
  • Real-time database updates
  • Responsive web design
  • Secure data communication

With these foundations, you can now create your own IoT Cloud platform — fully customized and scalable.

Your ESP32 isn’t just a microcontroller anymore — it’s your personal gateway to the cloud. 🌩️


🚀 Future Scope

  • Integrate AI-based automation (use TensorFlow Lite or Node-RED for predictive control).
  • Expand your Firebase database into a Google Cloud Project with analytics dashboards.
  • Offer remote device management and live monitoring from anywhere in the world.

🎯 Conclusion

You’ve successfully built a Home Automation IoT Cloud System using Firebase, complete with:

  • Real-time web dashboard
  • Manual + automated control
  • Expandable multi-device architecture
  • Secure and cost-free cloud setup

This project combines hardware intelligence (ESP32) with software power (Firebase & Web). It’s simple, affordable, and flexible enough for personal, academic, or professional applications.

So go ahead — connect, automate, and innovate your world 🌐✨

📞 Contact YaranaIoT Guru Empowering IoT Innovation | ESP32 | Home Automation | Smart Solutions | 50K+ Community

We’d love to hear from you! Whether it’s IoT project queries, collaborations, tech support, custom PCB design, bulk orders, corporate training, college workshops, or freelance development — we’re just one message away.


✉️ Email (Official)

For detailed inquiries, project support, business collaboration, sponsorships, or documentation: 📩 contact@yaranaiotguru.in 📧 Alternate: support@yaranaiotguru.inResponse: Within 24 hours (Mon–Sat) 💡 Best for attachments (code, schematics, logs, etc.)


📱 Phone / WhatsApp (24×7 Support)

Instant live help, troubleshooting, project consultation, or order updates: 📞 +91 70527 22734 💬 WhatsApp: Chat NowCall Hours: Mon–Sat, 10 AM – 7 PM IST 🚀 Emergency? WhatsApp anytime — reply within 1 hour


🌐 Official Website

Tutorials, code, PDFs, schematics, blogs, free tools & online store: 🔗 www.yaranaiotguru.in 🛒 Shop: yaranaiotguru.in/shop (ESP32 DevKits, Sensors, Relays, Custom PCBs, Project Kits)


▶️ YouTube Channel

Step-by-step IoT builds, live coding, ESP32, Blynk, Node-RED, MQTT, Home Assistant & more: 🔗 Yarana IoT Guru 📺 1,200+ Videos | 52K+ Subs | 5.5M+ Views | 4.8★ Rating 🎥 New Video Every Week — 🔔 Subscribe & Turn On Notifications


🛠 GitHub (100% Open Source)

All codes, Arduino sketches, PlatformIO projects, Node-RED flows, MQTT configs & docs: 🔗 github.com/YaranaIotGuru50+ Repos | 10K+ Stars & Forks

🔥 Top Projects:

  • ESP32 WebSocket Real-Time Dashboard
  • Smart Home with Blynk & Alexa
  • IoT Irrigation System with Soil Moisture
  • MQTT + Node-RED + MySQL Logging
  • OLED Weather Station with API

📸 Instagram

Daily reels, quick tips, live builds, student showcases & giveaways: 🔗 @YaranaIoTGuru 📱 10K+ Followers | Reels | Stories | Live Sessions


💼 LinkedIn (Professional Network)

B2B, IoT consulting, training, hiring & partnerships: 🔗 Yarana IoT Guru

🤝 Services Offered:

  • Custom IoT Product Development
  • Embedded Systems Training
  • College Workshops & FDPs
  • PCB Design & Prototyping

🐦 Twitter / X

Real-time updates, polls, project launches & community Q&A: 🔗 @YaranaIoTGuru 📢 Follow for instant alerts


🛠 Hackster.io (Project Showcases)

In-depth write-ups, circuits, BOM, code & ratings: 🔗 hackster.io/yaranaiotguru 🏆 50+ Projects | 100K+ Views | Top 5% Creator


📝 Instructables (DIY Guides)

Beginner-friendly step-by-step guides with templates & troubleshooting: 🔗 instructables.com/member/YaranaIoTGuru

🛠 Featured Guides:

  • Automatic Plant Watering System
  • Voice-Controlled Home Appliances
  • WiFi-enabled Temperature Monitor

📚 Medium Blog

Deep-dive articles, trends, tutorials & career tips in embedded systems: 🔗 medium.com/@yaranaiotguru ✍️ 50+ Articles | 15K+ Readers


🛒 Online Store & Kits

Ready-to-use IoT kits, custom PCBs, sensors & merch: 🔗 yaranaiotguru.in/shop 📦 Free Shipping in India above ₹999 💳 Payment: UPI, Card, Wallet, COD


🌟 Community Platforms

PlatformLinkPurpose
Telegram Channelt.me/YaranaIoTGuruProject files, PDFs, updates
Telegram Groupt.me/YaranaIoTCommunityPeer support, doubts
Discord Serverdiscord.gg/yarana-iotLive voice help, coding rooms
WhatsApp CommunityJoin HereAnnouncements & polls

🏢 Office & Studio Address

Yarana Studio & Software (Yarana IoT Guru HQ) 📍 Near Rookh Baba Mandir, Umariya Badal Urf Gainda, Allahabad (Prayagraj), Uttar Pradesh – 212507, India ⭐ Google Rating: 5.0 ★ (100+ Reviews)

🕒 Opening Hours: Mon–Sat: 10:00 AM – 5:00 PM Sunday: Closed

🌐 Associated Website: yaranawebtech.in 🗺️ View on Google Maps: Search “Yarana Studio & Software” 📌 Walk-ins welcome | Appointment recommended for project discussions

Leave a Reply

Your email address will not be published. Required fields are marked *