Inspiration
Many people leave lights on unnecessarily, wasting energy. A centralized smart switch solution helps reduce power consumption by allowing users to turn off devices and view stats in real time. Managing smart switches manually or through outdated apps can be inefficient and frustrating. Users need a solution that provides real-time control and centralizes device management, as many existing solutions are fragmented and lack synchronization.
What it does
Quick Switch is designed to control a Tasmota smart switch using MQTT and Node.js with Express. It provides real-time control over the smart switch via a responsive web interface, ensuring users can easily turn off devices and monitor their status. The project integrates with Supabase for storing and retrieving switch statuses and user interactions.
How we built it
The frontend is built with clean and responsive HTML5 and CSS3, providing a user-friendly interface. JavaScript manages the dynamic interactions of the web app. The backend utilizes Node.js and Express for routing and middleware, facilitating communication with the smart switch via the MQTT protocol. Python scripts are employed for automation processes, while Supabase serves as the database for real-time data storage and retrieval.
Challenges we ran into
- MQTT Integration: Establishing stable, real-time communication with the Tasmota smart switch proved challenging. We researched various MQTT libraries to ensure reliable message passing.
- Database Maintenance: Keeping an updated database across devices in a timely manner was difficult. We created a polling script to update the database, along with AJAX requests for client-server communication.
- Data Management: Storing and retrieving real-time device data using Supabase required handling complex queries. We implemented structured schemas and optimized queries to ensure data integrity and minimal latency.
- Responsive Design: Designing an intuitive dashboard for controlling the smart switch across devices involved careful front-end development. We utilized CSS Grid and Flexbox to ensure flexibility and usability across different screen sizes.
Accomplishments that we're proud of
- Successfully integrated MQTT for real-time communication with the Tasmota smart switch.
- Developed a responsive web interface that enhances user experience.
- Implemented a robust backend with efficient data handling through Supabase.
- Created a companion iOS app in Swift to further enhance accessibility and control.
What we learned
We learned the importance of thorough research in integrating protocols like MQTT and the value of optimizing database queries for real-time applications. Additionally, we gained insights into responsive web design techniques and the significance of user experience in smart home solutions.
What's next for Quick Switch
- Implementing long-term wattage graphs to track energy consumption trends.
- Generating summaries to identify devices that use high amounts of electricity over extended periods, enabling users to make informed decisions about their energy usage.
Built With
- css
- html
- javascript
- python
- supabase
- swift
Log in or sign up for Devpost to join the conversation.