SecureHome — ESP32 Security Dashboard

SecureHome is a premium, high-performance security dashboard designed for real-time monitoring of home security metrics. It provides a sleek and intuitive interface for tracking motion, environmental conditions, and system connectivity using ESP32 and MQTT.

🚀 Key Features

• Real-time Monitoring: Instant updates via MQTT protocol for low-latency security alerts.
• Dynamic Security Bar: Visual status indicator that shifts into "Alert Mode" when threats are detected.
• Integrated Presence Detection: Visual tracking of human proximity and room activity levels.
• Advanced Sensor Grid: Monitor environmental data including:
  • Temperature & Humidity: Track climate trends with precision.
  • Light Intensity: Auto-adjusting visuals based on ambient light levels.
  • Distance/Proximity: Precise distance tracking for door or motion monitoring.
• Activity Logging: Automated feed of system events and security notifications.
• Rich Visualizations: Interactive sparklines and gauge bars for data analysis at a glance.

🛠️ Technology Stack

• Frontend: Semantic HTML5, Vanilla CSS3 (Custom Properties, Flexbox, Grid).
• Communication: MQTT.js for real-time data streaming.
• Design System: Rich aesthetics with dark mode support and micro-animations.
• Typography: Inter and JetBrains Mono from Google Fonts.

📋 Prerequisites

To use this dashboard, you will need:

• An ESP32 or similar micro-controller configured as an MQTT client.
• Access to an MQTT Broker (e.g., Mosquitto, HiveMQ, or EMQX).
• Sensor data published to the expected MQTT topics.

⚙️ Setup & Installation

1. Clone the repository:

   git clone https://github.com/your-username/SecureHome.git
   cd SecureHome

2. Configure MQTT Settings: Open index.html and locate the MQTT configuration section to update your broker details:

   const MQTT_SERVER = "your-mqtt-broker-url";
   const MQTT_PORT = 8883; // or your port

3. Launch the Dashboard: Simply open index.html in any modern web browser or use a local development server like Live Server.

🛡️ License

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

✨ Acknowledgments

• Designed with focus on aesthetics and user experience.
• Powered by high-efficiency web technologies.