From Legacy HTML to React+Vite+TS: How I Migrated a 10-Screen Home Dashboard Without Breaking It

I run a personal home dashboard — I call it Palace — that controls lights, cameras, the family map, calendar, car status, audio, and a few other things. It started as server-rendered HTML pages. Each screen was its own .html file, styled with inline CSS, driven by vanilla JS. It worked. But it was getting messy. A few weeks ago I decided to modernize it properly. Here's how I migrated 10 screens to React+Vite+TypeScript, added a real test suite, and cut over to production — and what I learned. Why Bother? The old codebase had: 10 separate HTML pages, each with its own <style> block and <script> tags Copy-pasted nav link arrays in every file (the #1 source of drift) No types on API responses No tests Every time I added a feature, I had to update nav links in 10 places. Every time I changed an API response shape, I had to debug at runtime. It was fine until it wasn't. The new goals: single-page app, typed APIs, shared component library, and a CI gate that actually catches regressions. Th