I Built a Fully Animated Smart Home Simulation Dashboard with React

#react #webdev #typescript #iot

Hey everyone 👋

I've been working on a little side project: a smart home simulation dashboard
where you can control a lamp, fan, thermostat, door lock, garage door, AC, and
an LED strip — all with realistic, animated scenes right in the browser. No
real IoT hardware needed, everything runs as a client-side simulation.

🔗 Links

Live demo: https://iot-device-simulation-app.netlify.app/
Source code: [GitHub link here]

🧱 Tech Stack

React 19 + TypeScript
TanStack Start (file-based routing, SSR)
Tailwind CSS 4
Radix UI / shadcn/ui
Deployed on Netlify

💡 Why I built this

I wanted a playground to practice building expressive, physically-inspired UI
animations — things like the AC's airflow, the garage door sliding up, the LED
strip's glow, the thermometer's mercury rising — without needing actual smart
home devices to test against. Each device has its own animated "scene"
component built with plain CSS/SVG, no animation library involved.

The code is also structured so that swapping the local useState for a real
data source (e.g. MQTT over useMqttState('home/lamp')) would be a small,
contained change per device — so it could evolve into something that talks to
real hardware later.

🖼️ A quick look

🙋 Feedback welcome

I'd love feedback on:

The animations/UX — anything that feels off or could be smoother
Ideas for new devices to add
Anything about the architecture you're curious about — happy to go deeper on how any of the scenes were built

Thanks for reading! ⭐ If you like it, a star on GitHub means a lot.