Welcome to the Next.js Smart Home Lights project! This interactive challenge allows you to delve into the world of smart home lighting automation using Next.js.
This project is designed to simulate the automation of smart home lights within a virtual environment. Participants will engage in tasks that enhance the functionality of lights, including sharing state between components, displaying the count of turned-on lights, and enabling quick actions to toggle all lights. As a bonus, there's an opportunity to implement a feature that dims the background when all lights are turned off.
-
Lifting State Up: Share the state between components to ensure seamless communication.
-
Counting the Lights: Display the count of turned-on lights on the home page for a quick overview.
-
Quick Actions: Implement functions to toggle all lights on and off, providing a convenient way to manage lighting.
-
Bonus Feature: Dimming the Background 🌌 - Enhance the user experience by dimming the background when all lights are turned off.
Explore the live demo: Next.js Smart Home Lights