Domotica Control Center

About the project

The Domotica Control Center application is a comprehensive front-end solution for managing a smart home.
Users can create scenes, control devices in real-time, view their home via an interactive floorplan, and track all activity through logging dashboards.

The app is fully built in React + TypeScript, with a strong focus on performance, usability and reusable UI components.

Architecture & Features

• React + TypeScript front-end, optimized for speed
• Zustand state management → super lightweight global state
• React Query for data fetching + caching
• Scene Builder
  Configure logical flows: triggers, actions, delays, conditions
• Device Controls
  Live switches, sliders, thermostats, dimmers, etc.
• Floorplan Module
  Drag-and-drop layout view of rooms & devices
• Real-time Logging
  Activity per device, scene events, system health
• Tailwind + ShadCN UI for a modern, consistent interface
• Docker-ready for easy deployment

Technical challenges

• Keeping real-time updates performant with caching & optimistic updates
• Making complex scenes visually configurable via dynamic schemas
• Splitting state management between global UI state, device state and API state
• Making floor plan rendering performant (SVG + drag interactions)
• Separate logging pipelines for UI events, device events and scene events

Result

A professional, scalable and fast home automation interface that offers all functionality in one platform to fully manage a smart home - from daily operation to advanced automation.