The latest articles on DEV Community by Gökay Sağlam (@bengokaysaglam). https://dev.to/bengokaysaglam https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4039784%2Faa6bc30f-269f-4f6b-af29-5082d83a900f.jpg https://dev.to/bengokaysaglam en Gökay Sağlam Tue, 21 Jul 2026 09:58:14 +0000 https://dev.to/bengokaysaglam/i-built-a-fully-animated-smart-home-simulation-dashboard-with-react-47fp https://dev.to/bengokaysaglam/i-built-a-fully-animated-smart-home-simulation-dashboard-with-react-47fp <p>Hey everyone 👋</p> <p>I've been working on a little side project: a <strong>smart home simulation dashboard</strong><br> where you can control a lamp, fan, thermostat, door lock, garage door, AC, and<br> an LED strip — all with realistic, animated scenes right in the browser. No<br> real IoT hardware needed, everything runs as a client-side simulation.</p> <h2> 🔗 Links </h2> <ul> <li> <strong>Live demo:</strong> <a href="https://iot-device-simulation-app.netlify.app/" rel="noopener noreferrer">https://iot-device-simulation-app.netlify.app/</a> </li> <li> <strong>Source code:</strong> [GitHub link here]</li> </ul> <h2> 🧱 Tech Stack </h2> <ul> <li>React 19 + TypeScript</li> <li>TanStack Start (file-based routing, SSR)</li> <li>Tailwind CSS 4</li> <li>Radix UI / shadcn/ui</li> <li>Deployed on Netlify</li> </ul> <h2> 💡 Why I built this </h2> <p>I wanted a playground to practice building expressive, physically-inspired UI<br> animations — things like the AC's airflow, the garage door sliding up, the LED<br> strip's glow, the thermometer's mercury rising — without needing actual smart<br> home devices to test against. Each device has its own animated "scene"<br> component built with plain CSS/SVG, no animation library involved.</p> <p>The code is also structured so that swapping the local <code>useState</code> for a real<br> data source (e.g. MQTT over <code>useMqttState('home/lamp')</code>) would be a small,<br> contained change per device — so it could evolve into something that talks to<br> real hardware later.</p> <h2> 🖼️ A quick look </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fh864ekynajqlo6g6vj9e.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fh864ekynajqlo6g6vj9e.png" alt="Smart home dashboard showing animated lamp, fan, and AC controls" width="800" height="450"></a></p> <h2> 🙋 Feedback welcome </h2> <p>I'd love feedback on:</p> <ul> <li>The animations/UX — anything that feels off or could be smoother</li> <li>Ideas for new devices to add</li> <li>Anything about the architecture you're curious about — happy to go deeper on how any of the scenes were built</li> </ul> <p>Thanks for reading! ⭐ If you like it, a star on GitHub means a lot.</p> react webdev typescript iot