In this tutorial, I'll guide you step-by-step through building a Smart Home Dashboard using React and Tailwind CSS. This dashboard is designed to manage smart devices, monitor energy usage, and deliver real-time notifications. Whether you're a beginner or an experienced developer, you'll find practical tips and examples to make this project your own.

Introduction

Smart homes are the future, and a well-designed dashboard is crucial for managing connected devices. In this tutorial, we will build a dashboard with the following features:

Device Management: Control devices like lights, thermostat, and fans.
Energy Monitoring: Visualize energy usage trends.
Scene Activation: Quickly set up predefined modes like "Movie Night."
Notifications: Stay updated with alerts and messages.

Setting Up the Styling

We'll start by creating a consistent design system. The globals.css file defines global variables and base styles for the entire application.

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
    --primary-color: #00f9ff;
    --primary-glow: 0 0 10px rgba(0, 249, 255, 0.7);
    --secondary-color: #ff006c;
    --secondary-glow: 0 0 10px rgba(255, 0, 108, 0.7);
    --accent-color: #ffde03;
    --accent-glow: 0 0 10px rgba(255, 222, 3, 0.7);
    --dark-bg: #0a0c18;
    --darker-bg: #060814;
    --card-bg: #13172d;
    --card-hover-bg: #1b2040;
    --text-primary: #ffffff;
    --text-secondary: #9ea4c9;
    --success-color: #00ff66;
    --success-glow: 0 0 10px rgba(0, 255, 102, 0.7);
    --error-color: #ff3860;
    --error-glow: 0 0 10px rgba(255, 56, 96, 0.7);
    --warning-color: #ffde03;
    --border-radius: 8px;
    --transition-speed: 0.3s;
}

Key Features

Color Variables: Define primary, secondary, and accent colors for consistent theming.
Glow Effects: Add glowing borders for focus states.
Backgrounds: --dark-bg and --card-bg ensure a modern, dark-themed UI.

Designing the Layout

The layout consists of a sidebar, header, and main content area. These elements are styled in the page.module.css file.

.sidebar {
  display: flex;
  flex-direction: column;
  width: 250px;
  background-color: var(--darker-bg);
  border-right: 1px solid rgba(0, 249, 255, 0.2);
  padding: 1.5rem 1rem;
}
.logo {
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: bold;
}
.navButton {
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  background-color: transparent;
  cursor: pointer;
  transition: all var(--transition-speed);
}
.navButton:hover {
  background-color: rgba(0, 249, 255, 0.1);
  color: var(--text-primary);
}

Main Content Styles

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--dark-bg);
  color: var(--text-primary);
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 249, 255, 0.2);
}
.content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

Building the Main Component

The page.tsx file is the heart of the dashboard. It contains all the logic and components for managing devices, scenes, and notifications.

Importing Dependencies

'use client';
import { useState, useEffect } from 'react';
import { Home, Thermometer, Sun, Bell } from 'lucide-react';
import styles from './page.module.css';

Defining State

We define the state for devices, scenes, and notifications:

const [devices, setDevices] = useState([
  { id: 'light-living', name: 'Living Room Lights', type: 'light', status: true },
  { id: 'thermostat', name: 'Thermostat', type: 'thermostat', status: true, value: 22 },
]);
const [scenes] = useState([
  { id: 'movie-night', name: 'Movie Night', devices: ['light-living', 'thermostat'] },
]);
const [notifications, setNotifications] = useState(['Thermostat set to 22°C']);

Adding Device Controls

Each device is represented by a card with controls for toggling its status or adjusting values.

function DeviceCard({ device, toggleStatus }) {
  return (
    <div className={styles.deviceCard}>
      <h3>{device.name}</h3>
      {device.type === 'thermostat' && (
        <input
          type="range"
          min="16"
          max="30"
          value={device.value}
          onChange={(e) => toggleStatus(device.id, e.target.value)}
        />
      )}
      <button onClick={() => toggleStatus(device.id)}>
        {device.status ? 'Turn Off' : 'Turn On'}
      </button>
    </div>
  );
}

Monitoring Energy Usage

The energy section displays usage trends in a simple chart.

function EnergyChart({ data }) {
  return (
    <div className={styles.energyChart}>
      {data.map((hour) => (
        <div key={hour.hour} style={{ height: `${hour.usage * 20}px` }}></div>
      ))}
    </div>
  );
}

Real-Time Notifications

Notifications are displayed in a list with dismiss functionality.

function Notifications({ notifications, clearNotification }) {
  return (
    <ul>
      {notifications.map((note, index) => (
        <li key={index}>
          {note}
          <button onClick={() => clearNotification(index)}>Dismiss</button>
        </li>
      ))}
    </ul>
  );
}

Conclusion

By following this tutorial, you now have a fully functional Smart Home Dashboard with:

Interactive Device Controls
Energy Monitoring
Real-Time Notifications

This project is a great starting point for building your own smart home solutions. Feel free to customize it and add new features!

Gallery of Photos:

Follow me on X:

https://x.com/OdynDeveloper/status/1917723400153210890

Thank you so much for stopping by! 🙏
I truly appreciate your interest and support.
If you're curious about more of my work, feel free to explore my portfolio:
👉 [Click here]

I'm constantly working on new projects, expanding my knowledge, and pushing the boundaries of creativity. 🚀
You can also check out more of my projects and ideas right here on my Profile. Enjoy the journey!

Building a Smart Home Dashboard with React and Tailwind CSS