Switch Board - Smart Home Control System

A complete IoT solution for controlling smart home devices (lights, fans, and sockets) using an ESP32 microcontroller and a modern React dashboard with Firebase Realtime Database.

📋 Project Structure

Switch-Board/
├── dashboard/          # React web dashboard (TypeScript + Tailwind CSS)
├── esp32/              # ESP32 firmware (Arduino C++)
└── README.md           # This file

🎯 Features

Dashboard

• 🎨 Modern, responsive React UI with Tailwind CSS
• 🔄 Real-time device state synchronization via Firebase
• 📱 Mobile-friendly design
• 🌙 Dark mode support
• ⚡ Instant control feedback
• 🎯 Simple click-to-toggle interface

ESP32 Firmware

• 📡 WiFi connectivity
• 🔥 Firebase Realtime Database integration
• 🎮 Control 3 devices: LED (Light), Fan, Socket
• 🔄 Real-time state updates via Firebase streams
• 🔌 GPIO pin control

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Arduino IDE or PlatformIO for ESP32
• Firebase Project (see setup below)

Dashboard Setup

1. Navigate to dashboard folder

   cd dashboard

2. Install dependencies

   npm install

3. Configure Firebase

   • Open src/firebase.ts
   • Replace the placeholder values with your Firebase project credentials:

     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       databaseURL: "YOUR_DATABASE_URL",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID"
     };

4. Start development server

   npm run dev

   The dashboard will be available at http://localhost:5173

5. Build for production

   npm run build

ESP32 Setup

1. Navigate to esp32 folder

   cd esp32

2. Configure WiFi and Firebase credentials

   • Open src/main.cpp
   • Update the following constants:

     #define WIFI_SSID       "YOUR_WIFI_SSID"
     #define WIFI_PASSWORD   "YOUR_WIFI_PASSWORD"
     #define FB_API_KEY      "YOUR_FIREBASE_API_KEY"
     #define FB_DB_URL       "YOUR_DATABASE_URL"
     #define USER_EMAIL      "YOUR_ESP32_EMAIL"
     #define USER_PASSWORD   "YOUR_ESP32_PASSWORD"

3. Configure GPIO Pins (if using different pins)

   #define LED_PIN     4      // Light control pin
   #define FAN_PIN     5      // Fan control pin
   #define SOCKET_PIN  18     // Socket control pin

4. Upload to ESP32

   • Using PlatformIO:

     pio run -t upload

   • Or use Arduino IDE with appropriate board settings

🔧 Configuration

Firebase Realtime Database Structure

The Firebase database should have the following structure:

{
  "led": {
    "state": "0" or "1"
  },
  "fan": {
    "state": "0" or "1"
  },
  "socket": {
    "state": "0" or "1"
  }
}

Firebase Security Rules

Set up the following security rules for your database:

{
  "rules": {
    "led": {
      ".write": true,
      ".read": true
    },
    "fan": {
      ".write": true,
      ".read": true
    },
    "socket": {
      ".write": true,
      ".read": true
    }
  }
}

⚠️ Note: These are open permissions for development. For production, implement proper authentication and authorization.

📦 Dependencies

Dashboard

• React 19.1.1 - UI framework
• TypeScript 5.9.3 - Type safety
• Tailwind CSS 3.3.5 - Styling
• Firebase 12.5.0 - Realtime database
• react-icons 5.5.0 - Icon library
• Vite 7.1.7 - Build tool

ESP32

• Firebase Arduino Client Library - Firebase integration
• Adafruit GFX Library - Graphics library
• Adafruit SSD1306 - OLED display support

🎮 Usage

Controlling Devices

1. Open the dashboard in your browser
2. Click on any device card (Light, Fan, Socket) to toggle it on/off
3. The state will update in real-time across all connected clients
4. The ESP32 will receive the update via Firebase stream and control the GPIO pins

Real-time Updates

• The dashboard subscribes to Firebase Realtime Database
• When any device state changes, all connected clients update instantly
• The ESP32 monitors the database and updates physical pins accordingly

🔒 Security Considerations

• Never commit sensitive credentials to the repository
• Use .env files for environment variables
• Store Firebase credentials securely
• Change default WiFi and authentication credentials
• Use strong passwords for Firebase authentication
• Implement proper security rules in Firebase

🛠️ Troubleshooting

Dashboard Issues

Build errors

• Delete node_modules and reinstall: npm install
• Clear Vite cache: rm -rf dist

Firebase connection issues

• Verify Firebase credentials in src/firebase.ts
• Check Firebase Realtime Database URL
• Ensure database security rules allow read/write

ESP32 Issues

WiFi connection fails

• Verify SSID and password are correct
• Check ESP32 has stable power supply
• Restart ESP32 and check serial monitor

Firebase connection fails

• Verify API key and database URL
• Check internet connection
• Review Firebase authentication credentials
• Ensure Firebase project has Realtime Database enabled

GPIO pins not responding

• Verify pin numbers in configuration
• Check electrical connections
• Test GPIO pins with simple sketch first

📚 Documentation

• Firebase Documentation
• React Documentation
• ESP32 Documentation
• Tailwind CSS Documentation

🤝 Contributing

Feel free to fork, improve, and submit pull requests!

📝 License

This project is open source and available under the MIT License.

📧 Support

For issues and questions, please open an issue on GitHub.

---

Happy Home Automation! 🏠