This project is a self-hosted Progressive Web App (PWA) that provides a modern and intuitive interface to control Tasmota-flashed smart bulbs in real-time. It features a responsive dashboard for instant control over your smart lighting, including power, color temperature, RGB color, and brightness. The application is secured with API key authentication and is designed for easy one-click deployment on Vercel, offering a native-like experience on both desktop and mobile devices.

The backend is built with Express.js and TypeScript, establishing a secure connection to an MQTT broker to communicate with the Tasmota-flashed smart bulb. It listens for real-time state changes using Tasmota's stat/, tele/, and discovery topics and publishes commands to the cmnd/ topic. The backend also serves the frontend and provides a simple, authenticated API for the client. For robust and type-safe validation of all incoming API requests, Zod is used, and structured logging is handled by Winston.

The frontend is a responsive, mobile-first single-page application built with Tailwind CSS and vanilla JavaScript. It communicates with the backend via a simple API and uses a service worker for PWA functionality and offline asset caching. The UI dynamically updates based on the latest device state received from the backend, providing real-time information at a glance including IP address, hostname, firmware version, Wi-Fi signal strength, and more.

Key Features:

Real-Time Control: Instantly syncs with your bulb's state using an efficient MQTT-first approach, backed by HTTP polling.
Full Power Control: Toggle the bulb on or off with a responsive button.
White Ambiance: Fine-tune color temperature from warm (153 mired) to cool (500 mired).
RGB Color Selection: An intuitive hue and saturation slider lets you pick the perfect color.
Brightness Dimmer: Adjust brightness levels from 0% to 100%.
Secure Authentication: Protects your dashboard with a mandatory API key.
PWA-Compatible: Install it as a standalone app on desktop or mobile for a native-like experience with offline support.

Technologies Used:

Backend: Node.js, Express.js, TypeScript, MQTT.js, Zod, Winston, dotenv, cors.
Frontend: HTML, Tailwind CSS, Vanilla JavaScript.
Deployment: Vercel.
Others: Git, npm.

Estimated reading time: 3 minutes