Smart Home Dashboard
Modern React UI for IoT Control
Preview SiteS
m
a
r
t
H
o
m
e
D
a
s
h
b
o
a
r
d
Modern React UI for IoT Control
Project Overview
This comprehensive dashboard provides users with full control over their smart home ecosystem. From temperature management and lighting control to security systems and media centers, everything is accessible through a single, intuitive interface. The dashboard features real-time data visualization, customizable widgets, and responsive design that works flawlessly across all devices.
Key Features
- Responsive design for mobile, tablet, and desktop
- Dark/light mode with animated transitions
- Real-time device control (lights, thermostat, fan, etc.)
- Interactive sliders and toggles for device settings
- Drag-and-drop customizable dashboard widgets
- Room-based device grouping and filtering
- Quick scene activation (Movie Night, Away Mode, etc.)
- Live energy monitoring with hourly breakdowns
- Usage analytics with trend indicators
- Secure login with multi-factor authentication
- System notifications with dismissable alerts
- Smooth animations via Framer Motion
- Add/remove devices dynamically
- Scalable architecture for future smart devices
Tech Stack
Next.js
React framework for server-side rendering and static site generation.
React
JavaScript library for building user interfaces.
Tailwind CSS
Utility-first CSS framework for rapid UI development.
Framer Motion
Animation library for React.
Recharts
Composable charting library built on React components.
Socket.io
Real-time event-based communication.
Hashnode & Code
'use client';
import { useState, useEffect } from 'react';
import { Home, Power, Thermometer, Zap, Bell, X, Monitor } from 'lucide-react';
import styles from './page.module.css';
interface Device {
id: string;
name: string;
type: string;
status: boolean;
value?: number;
}
export default function SmartHomeDashboard() {
const [devices, setDevices] = useState<Device[]>([
{ id: 'light-living', name: 'Living Room Lights', type: 'light', status: true, value: 80 },
{ id: 'thermostat', name: 'Thermostat', type: 'thermostat', status: true, value: 22 },
{ id: 'alarm', name: 'Security Alarm', type: 'alarm', status: true }
]);
const [currentTime, setCurrentTime] = useState('');
const [currentDate, setCurrentDate] = useState('');
const [alertMessage, setAlertMessage] = useState('');
const [showAlert, setShowAlert] = useState(false);
useEffect(() => {
const interval = setInterval(() => {
const now = new Date();
setCurrentTime(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
setCurrentDate(now.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' }));
}, 1000);
return () => clearInterval(interval);
}, []);
const toggleDeviceStatus = (id: string) => {
setDevices(devices.map(d => d.id === id ? { ...d, status: !d.status } : d));
setAlertMessage(`${devices.find(d => d.id === id)?.name} toggled`);
setShowAlert(true);
setTimeout(() => setShowAlert(false), 3000);
};
return (
<div className={styles.container}>
<header className={styles.header}>
<h1>SmartHome Dashboard</h1>
<div>{currentDate} | {currentTime}</div>
</header>
<section className={styles.stats}>
<div><Home size={16} /> Devices: {devices.length}</div>
<div><Power size={16} /> Active: {devices.filter(d => d.status).length}</div>
<div><Thermometer size={16} /> Temp: {devices.find(d => d.id === 'thermostat')?.value}°C</div>
</section>
<section className={styles.devices}>
<h2>Devices</h2>
{devices.map(device => (
<div key={device.id} className={styles.deviceCard}>
<h3>{device.name}</h3>
<p>Status: {device.status ? 'On' : 'Off'}</p>
<button onClick={() => toggleDeviceStatus(device.id)}>
Toggle
</button>
</div>
))}
</section>
{showAlert && (
<div className={styles.alert}>
<Bell size={16} /> {alertMessage}
<button onClick={() => setShowAlert(false)}><X size={12} /></button>
</div>
)}
</div>
);
}
Interested in This Project?
Want to learn more about how this Smart Home Dashboard was built or need help implementing something similar? Feel free to reach out or check out the code repository for a deep dive into the implementation.