ESP32 Sensor Network Dashboard 🌐

A comprehensive IoT monitoring dashboard for ESP32 sensor networks with real-time data visualization, visual device configuration, and alert management.

🌟 Features

Core Capabilities

• Real-Time Monitoring: Live sensor data updates every 5-10 seconds
• Multi-Device Support: Monitor unlimited ESP32 devices simultaneously
• 7 Sensor Types: DHT11, DHT22, BME280, DS18B20, DS18B25, BH1750, LM393
• Visual ESP32 Configurator: Generate Arduino code with visual pin mapping
• ESP32-CAM Support: Configure and monitor camera-enabled ESP32 boards
• Dark/Light Theme: Beautiful UI with theme toggle
• Historical Data: View and analyze past sensor readings
• Alert System: Set thresholds and get notifications

Supported Measurements

• 🌡️ Temperature (°C)
• 💧 Humidity (%)
• 🎈 Pressure (hPa)
• 💡 Light Intensity (lux)
• 🔊 Sound Level (0-100%)?

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• ESP32 development board(s)
• Supported sensors (see list above)
• Arduino IDE for ESP32 programming

Installation

1. Clone the repository

git clone https://github.com/yourusername/esp32-sensor-dashboard.git
cd esp32-sensor-dashboard

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open the dashboard Navigate to http://localhost:5000 in your browser

Setting Up ESP32 Devices

1. Use the Visual Configurator

   • Click "ESP32 Setup" in the dashboard
   • Select your board and sensor type
   • Configure pins visually
   • Download generated Arduino code

2. Upload to ESP32

   • Open the .ino file in Arduino IDE
   • Install required libraries (listed in the code)
   • Configure WiFi credentials
   • Upload to your ESP32

3. Monitor Data

   • Data will automatically appear in the dashboard
   • View real-time charts and historical data

📁 Project Structure

├── client/               # React TypeScript frontend
│   ├── src/
│   │   ├── pages/       # Dashboard, Configurator, Alerts, etc.
│   │   ├── components/  # Reusable UI components
│   │   └── lib/         # Utilities and helpers
│   └── public/
│
├── server/              # Express TypeScript backend
│   ├── routes.ts        # API endpoints
│   ├── storage.ts       # Data persistence layer
│   └── index.ts         # Server entry point
│
├── shared/              # Shared TypeScript types
│   └── schema.ts        # Data models and validation
│
├── arduino-esp32/       # Arduino sketches for ESP32
│   ├── sensor-sketches/ # Individual sensor examples
│   ├── camera-sketches/ # ESP32-CAM examples
│   └── examples/        # Multi-sensor configurations

🔌 API Endpoints

Endpoint	Method	Description
/api/sensor-readings	POST	ESP32 devices post sensor data
/api/sensor-readings/latest	GET	Latest reading from each device
/api/sensor-readings	GET	All historical readings
/api/sensor-readings/device/:id	GET	Readings for specific device
/api/sensor-readings/range	GET	Readings within time range
/api/sensor-readings/:id	PATCH	Update a reading
/api/sensor-readings/:id	DELETE	Delete a reading

📡 ESP32 Data Format

{
  "deviceId": "ESP32_001",
  "deviceName": "Living Room Sensor",
  "sensorType": "DHT22",
  "temperature": 24.5,
  "humidity": 60.2,
  "pressure": null,
  "light": null,
  "sound": null
}

🎨 Screenshots

Dashboard Features

• Real-time sensor cards with latest readings
• Interactive line charts for data trends
• Historical data table with filtering
• Time range selection (1h, 6h, 24h)
• Device-specific views

ESP32 Configurator

• Visual pin configuration
• 16+ supported ESP32 board types
• Automatic code generation
• WiFi and server setup included

Camera Dashboard

• Live feed monitoring
• Resolution and FPS settings
• Online/offline status tracking
• Feed history table

🛠️ Technology Stack

Frontend

• React 18 with TypeScript
• TanStack Query for data fetching
• Recharts for data visualization
• Tailwind CSS for styling
• Shadcn/UI component library
• Lucide React icons

Backend

• Express.js with TypeScript
• Zod for validation
• In-memory storage (upgradeable to PostgreSQL)
• RESTful API design

Hardware

• ESP32 microcontrollers
• Arduino IDE for firmware
• WiFi connectivity for data transmission

📚 Documentation

For Users

• ESP32 Setup Guide
• API Documentation
• Troubleshooting Guide

For Developers

• Contributing Guidelines
• Development Setup
• Architecture Overview

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Areas for Contribution

• Additional sensor support
• Data export features (CSV, Excel)
• Mobile app development
• MQTT integration
• Machine learning predictions

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• ESP32 community for hardware support
• React and TypeScript communities
• Contributors and testers

📧 Contact

• GitHub Issues: Create an issue

🚦 Status

🟢 Active Development - Regular updates and new features being added

---

Made with ❤️ for the IoT Community