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

ESP32 Projects Home Automation IoT Cloud
yarana_iotLeave a Comment on Home Automation Made Easy: Create Your Own IoT Cloud with a Custom Web Dashboard Using Firebase

In this project, you’ll learn how to build your own IoT Cloud platform using Firebase Realtime Database and the ESP32 Wi-Fi microcontroller, combined with a custom web dashboard that allows you to control and monitor home devices from anywhere in the world — with zero coding experience required on the cloud side!

This project shows how to:

  • Create your personal Firebase IoT Cloud.
  • Connect ESP32 with Firebase for real-time control and monitoring.
  • Design a modern web dashboard using HTML, CSS, and JavaScript.
  • Control LEDs, fans, or appliances remotely.
  • Get instant sync between web dashboard and hardware.

This guide is perfect for IoT enthusiasts, students, and developers who want to go beyond pre-made apps and create a fully customized cloud dashboard that looks professional and works in real time.

⚙️ Why Use Firebase for IoT Cloud?

Firebase, powered by Google, offers a Realtime Database that synchronizes data across devices instantly.
It’s a perfect backend for IoT systems because:

  • It provides real-time communication between hardware and cloud.
  • Has a free tier for learning and small projects.
  • Works easily with ESP32/ESP8266.
  • Requires no server setup — everything is cloud-hosted.

💡 How It Works

  1. The ESP32 connects to your Wi-Fi and links with your Firebase account using a secret key and project URL.
  2. The ESP32 reads and writes data to Firebase — for example, “LED = ON”.
  3. The web dashboard also connects to Firebase, and both remain synchronized.
  4. Whenever you click a button on your dashboard, Firebase updates instantly, and ESP32 reacts in real time.

This means you can control your devices from any browser, anywhere in the world 🌎.

🧰 Components Required

ComponentQuantityDescription
ESP32 Wi-Fi Development Board1Main microcontroller
LED2–3To represent home devices
2-Channel Relay Module1For controlling high-voltage devices
Breadboard + Jumper WiresAs requiredCircuit setup
5V Power Supply1Power for ESP32 and relays
Laptop/PC1To code and test
Firebase Account1Cloud database
HTML + JS files1For dashboard

🔌 Basic Circuit Diagram

You can start by connecting:

  • LED1 → GPIO 25, LED2 → GPIO 26 (through resistors)
  • Relay IN1 → GPIO 27, Relay IN2 → GPIO 14
  • VCC → 5V, GND → GND

The ESP32 will control these outputs based on Firebase data nodes like:

/Home/LED1/state
/Home/LED2/state

📡 Project Flow

  1. Create Firebase Realtime Database.
  2. Generate API keys and Database URL.
  3. Connect ESP32 using Arduino IDE.
  4. Build Web Dashboard (HTML + JS) for control.
  5. Sync dashboard ↔ Firebase ↔ ESP32.

🧩 Software Used

  • Arduino IDE – For programming ESP32.
  • Firebase Console – For creating your IoT Cloud.
  • VS Code / Notepad++ – For dashboard design.
  • Browser – For testing your cloud control panel.

Custom Web Dashboard Using Firebase

🔹 Part 2 – Firebase Setup & ESP32 Configuration

Now that we’ve understood the concept and architecture of our smart home IoT system, let’s build the backbone of this project — the Firebase IoT Cloud and ESP32 configuration.
This part will take you step-by-step from creating your Firebase project to connecting your ESP32 microcontroller for real-time data communication.

☁️ Step 1: Create a Firebase Account and Project

  1. Go to Firebase Console.
  2. Click “Add Project” → Enter a name (e.g., SmartHomeCloud).
  3. Disable Google Analytics (optional).
  4. Click Create Project → Wait for a few seconds.

🎉 Once your project is created, you’ll enter the Firebase dashboard.

🗂️ Step 2: Enable Firebase Realtime Database

  1. From the left sidebar, click Build → Realtime Database.
  2. Click Create Database → Select your preferred location (e.g., asia-south1).
  3. Choose Start in Test Mode (for easy access during development).
  4. Your database URL will look like this: https://smarthomecloud-default-rtdb.firebaseio.com/

This URL will be used in your Arduino code.

🔑 Step 3: Generate Firebase Secret Key

  1. Go to Project Settings → Service Accounts.
  2. Click on Database Secrets (or create a service account).
  3. Copy the Secret Key — this will authenticate your ESP32 to Firebase.

Keep it safe — you’ll use it soon in your Arduino code.

⚙️ Step 4: Setup Database Structure

Let’s define our IoT database path.
Click the Realtime Database → Data tab and manually create nodes like this:

Home
 ┣━ Devices
 ┃   ┣━ Light1: "OFF"
 ┃   ┗━ Fan: "OFF"
 ┗━ Sensors
     ┣━ Temperature: "0"
     ┗━ Humidity: "0"

This structure keeps things organized and scalable for future devices.

💻 Step 5: Install Firebase Arduino Library

Open the Arduino IDE, then:

  1. Go to Sketch → Include Library → Manage Libraries.
  2. Search for Firebase ESP32 Client by Mobizt.
  3. Install the library.
  4. Also install ArduinoJson and WiFi libraries (if not already installed).

⚡ Step 6: Write the ESP32 Firebase Connection Code

Here’s the initial setup code to connect ESP32 to your Firebase Realtime Database 👇

/***************************************************
   Smart Home Automation using ESP32 + Firebase
   Created by YaranaIoT Guru
****************************************************/

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

// Replace with your credentials
#define WIFI_SSID "Your_WiFi_Name"
#define WIFI_PASSWORD "Your_WiFi_Password"
#define FIREBASE_HOST "https://smarthomecloud-default-rtdb.firebaseio.com/"
#define FIREBASE_AUTH "Your_Firebase_Secret_Key"

FirebaseData fbdo;
FirebaseAuth auth;
FirebaseConfig config;

int lightPin = 25;
int fanPin = 26;

void setup() {
  Serial.begin(115200);
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  pinMode(lightPin, OUTPUT);
  pinMode(fanPin, OUTPUT);

  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi connected!");

  config.host = FIREBASE_HOST;
  config.signer.tokens.legacy_token = FIREBASE_AUTH;

  Firebase.begin(&config, &auth);
  Firebase.reconnectWiFi(true);
}

void loop() {
  String lightStatus = Firebase.getString(fbdo, "/Home/Devices/Light1") ? fbdo.stringData() : "OFF";
  String fanStatus = Firebase.getString(fbdo, "/Home/Devices/Fan") ? fbdo.stringData() : "OFF";

  if (lightStatus == "ON") digitalWrite(lightPin, HIGH);
  else digitalWrite(lightPin, LOW);

  if (fanStatus == "ON") digitalWrite(fanPin, HIGH);
  else digitalWrite(fanPin, LOW);

  delay(1000);
}

✅ What This Code Does:

  • Connects ESP32 to your Wi-Fi and Firebase Cloud.
  • Reads the values of “Light1” and “Fan” from your database.
  • Turns ON/OFF devices accordingly in real time.

🧠 Step 7: Upload & Verify

  1. Connect ESP32 to your PC via USB.
  2. Select Tools → Board → ESP32 Dev Module.
  3. Choose the correct COM Port.
  4. Upload the code.
  5. Open the Serial Monitor (115200 baud).

If everything is correct, you’ll see:

Connecting to WiFi....
WiFi connected!
Fetching data from Firebase...
Light1: OFF
Fan: OFF

Now, change values directly in Firebase (ON/OFF) and watch your ESP32 pins respond instantly! ⚡

🌐 1. Understanding the Dashboard Concept

Your Firebase database acts as the backend.
The ESP32 communicates with Firebase to update or read device states.
The Web Dashboard (frontend) is built using:

  • HTML – for structure
  • CSS – for design and layout
  • JavaScript – for real-time Firebase operations

Whenever you click a button on the dashboard:

  1. JavaScript sends an update to Firebase.
  2. Firebase instantly syncs the change to ESP32.
  3. ESP32 turns ON/OFF the respective device.

That’s full IoT cloud control — no external app required 🚀

🧩 2. Creating the HTML File

Open your code editor (VS Code, Notepad++, or Sublime Text), and create a new file named index.html.
Paste this code inside it 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YaranaIoT Smart Home Dashboard</title>
  <style>
    body {
      background-color: #0b0f19;
      color: #fff;
      font-family: 'Poppins', sans-serif;
      text-align: center;
    }
    h1 {
      color: #00ffcc;
      margin-top: 30px;
    }
    .device {
      display: inline-block;
      background: #1c2230;
      margin: 20px;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 0 15px #00ffcc33;
    }
    button {
      background: #00ffcc;
      border: none;
      color: #000;
      padding: 12px 30px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #00ffaa;
    }
  </style>
</head>
<body>
  <h1>Smart Home Dashboard – Firebase + ESP32</h1>

  <div class="device">
    <h2>💡 Light 1</h2>
    <button id="light1on">Turn ON</button>
    <button id="light1off">Turn OFF</button>
  </div>

  <div class="device">
    <h2>🌬️ Fan</h2>
    <button id="fanon">Turn ON</button>
    <button id="fanoff">Turn OFF</button>
  </div>

  <div class="device">
    <h2>🌡️ Temperature</h2>
    <p id="tempValue">-- °C</p>
    <p id="humValue">-- % Humidity</p>
  </div>

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

    // Your Firebase configuration
    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: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const database = getDatabase(app);

    // Control Light 1
    document.getElementById("light1on").addEventListener("click", function(){
      set(ref(database, 'Home/Devices/Light1'), "ON");
    });
    document.getElementById("light1off").addEventListener("click", function(){
      set(ref(database, 'Home/Devices/Light1'), "OFF");
    });

    // Control Fan
    document.getElementById("fanon").addEventListener("click", function(){
      set(ref(database, 'Home/Devices/Fan'), "ON");
    });
    document.getElementById("fanoff").addEventListener("click", function(){
      set(ref(database, 'Home/Devices/Fan'), "OFF");
    });

    // Live Temperature and Humidity
    const tempRef = ref(database, 'Home/Sensors/Temperature');
    const humRef = ref(database, 'Home/Sensors/Humidity');

    onValue(tempRef, (snapshot) => {
      document.getElementById("tempValue").innerHTML = snapshot.val() + " °C";
    });

    onValue(humRef, (snapshot) => {
      document.getElementById("humValue").innerHTML = snapshot.val() + " %";
    });
  </script>
</body>
</html>

🧠 3. How It Works

  • The Firebase SDK connects directly to your database using credentials.
  • The “Turn ON/OFF” buttons write new values (ON/OFF) to Firebase.
  • ESP32 reads those changes instantly and controls the connected devices.
  • Temperature and humidity updates from ESP32 are displayed on the dashboard in real time.

🧪 4. Testing Your Dashboard

  1. Replace all Firebase placeholders (YOUR_API_KEY, YOUR_PROJECT_ID, etc.) with your real Firebase credentials.
  2. Open the HTML file in your browser.
  3. Try clicking Turn ON / Turn OFF buttons.
  4. Watch Firebase update live — and your ESP32 relays or LEDs respond instantly!

🎉 Congratulations — your custom IoT control panel is now live and working perfectly!

💡 5. Add Style and Realism

You can customize your dashboard further:

  • Add device icons or animations.
  • Include more devices like Smart Plug, Door Lock, or AC Control.
  • Use CSS Grid or Bootstrap for better layout.
  • Host the page online via GitHub Pages or Firebase Hosting.

🔹 1. Testing Everything Together

Now that your ESP32, Firebase, and custom web dashboard are ready, it’s time to bring all the components together and see the real magic of IoT Cloud Automation ✨

✅ Step-by-Step Testing Procedure

  1. Power up your ESP32
    • Upload the Firebase-enabled code you created earlier (Part 2).
    • Make sure it connects to WiFi successfully (check Serial Monitor).
  2. Open your Firebase Realtime Database
    • Go to your Firebase Console → Realtime Database → Data tab.
    • You should see paths like: Home/ Devices/ Light1 : "OFF" Fan : "OFF" Sensors/ Temperature : "27" Humidity : "45"
  3. Launch your HTML Dashboard
    • Open index.html in your browser.
    • Click “Turn ON” under Light or Fan.
    • Instantly, the database should change values → ESP32 detects change → LED/Relay toggles! 💡
  4. Check Sensor Feedback (if used)
    • ESP32 sends live sensor readings (temperature/humidity) to Firebase.
    • Dashboard values update instantly using onValue() listeners.

If all works in sync — congratulations 🎉 You’ve built your own cloud-connected IoT control system!

🔹 2. Hosting the Dashboard Online

So far, your dashboard works locally (offline). But to access it anywhere in the world, let’s host it online 🌍

🚀 Option 1 – Firebase Hosting (Best Integration)

  1. Install Firebase CLI (Command-Line Tool) npm install -g firebase-tools
  2. Login to Firebase firebase login
  3. Initialize Hostingfirebase init hosting
    • Choose your Firebase project.
    • Set public directory as "public" (or where your HTML file is).
    • Configure as a single-page app (y/n → yes).
  4. Deploy firebase deploy

🎉 You’ll get a public URL like:
👉 https://your-project-name.web.app

Now your smart-home dashboard is globally accessible!

🌐 Option 2 – GitHub Pages (Free & Easy)

  1. Create a GitHub repository.
  2. Upload your index.html file.
  3. Go to Settings → Pages → Branch: main → /root → Save.
  4. After a few minutes, you’ll get a live link such as
    https://yourusername.github.io/SmartHomeDashboard/

Now you can control your IoT devices directly from this hosted web page.

🔹 3. Real-World Use Case Demo

Let’s imagine your setup in action 👇

🏠 Scenario:
You’re at work, and you want to check if you left the lights on.

📱 You do this:

  1. Open your hosted dashboard on your phone.
  2. The “Light 1” indicator shows ON.
  3. You click “Turn OFF” — Firebase updates → ESP32 receives it → Relay turns off the light instantly at home.

✅ No external apps.
✅ No complex networking.
✅ Works globally via the cloud.

🔹 4. Security & Improvements

🔒 Add Security Rules in Firebase

Protect your database from public misuse by limiting write access:

{
  "rules": {
    ".read": true,
    ".write": "auth != null"
  }
}

You can later enable Firebase Authentication to allow only verified users to control devices.

🔧 Advanced Improvements (Next-Level Ideas)

  1. Add Real-Time Charts – use Chart.js to visualize temperature trends.
  2. Voice Control – connect Firebase with Google Assistant or Alexa.
  3. MQTT Gateway – integrate MQTT broker for hybrid Firebase + MQTT control.
  4. Automation Logic – add “if temperature > 30°C → turn on fan” conditions.
  5. Mobile App Version – wrap your web dashboard into an Android App using WebView or Flutter.

🔹 5. Project Summary

ComponentRole
ESP32Connects sensors/devices and communicates with Firebase
FirebaseCloud database to sync commands and readings
Web DashboardUser interface for real-time monitoring and control
HostingEnables global access to the dashboard
YaranaIoT GuruThe community guiding you through every IoT innovation 🚀

📞 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.in ⏳ Response: 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 Now ⏰ Call 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/YaranaIotGuru ⭐ 50+ 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

Post Views: 236

Related Posts

Leave a Reply

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