I developed this Android app using Capacitor to serve as a playground to build my own quickly accessible Home Assistant controller. I had two main goals with this project: Replace the simplistic “Home Slide” app I had been using with something I could customize to my own liking, and attempt to make it feel as “native” as I could using my own frontend tooling.
I built the application using Vite as the build system and Tailwind CSS, Vue, and TypeScript for the frontend, wrapped in Capacitor for mobile deployment. The architecture follows a service-based pattern with dependency injection for clean separation of concerns and maintainable code.
By using Vite, I am able to leverage the built-in development server for very quick remote development feedback. Thanks to Vite’s hot module reloading feature, I can make changes to the code on the host computer and see that immediately reflected on my actual device, enabling rapid iteration and experimentation.
The great part about this setup is that I can reuse the UI code and frontend services in other contexts as well, such as a traditional web application or even other platform deployments like on the desktop through Electron.
One of the most challenging aspects was implementing a unique window management system that allows the app to float above other applications while remaining discrete in the system. Inspired by how Google Assistant behaves, I used Android Studio to configure the application to have special window privileges through the manifest. I wrote code surrounding the Capacitor web view to create a fully transparent window that hides itself when it loses focus, while maintaining high performance and user interactivity when visible through hardware acceleration.