Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juanpablo70/smarthomereact
Smart Home: Light Control
https://github.com/juanpablo70/smarthomereact
hooks react usecontext-hook usereducer-hook vite
Last synced: about 1 month ago
JSON representation
Smart Home: Light Control
- Host: GitHub
- URL: https://github.com/juanpablo70/smarthomereact
- Owner: JuanPablo70
- Created: 2023-10-30T00:11:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-06T00:36:12.000Z (over 1 year ago)
- Last Synced: 2024-11-21T21:06:41.622Z (3 months ago)
- Topics: hooks, react, usecontext-hook, usereducer-hook, vite
- Language: JavaScript
- Homepage:
- Size: 227 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Smart Home: Light Control - React Hooks
This project simulates a "smart home", empowering users to manage lights in different rooms through an interactive dashboard. Developed with ReactJS, this application showcases the use of useReducer and useContext hooks to handle the light state, delivering an efficient and user-friendly experience.
### Prerequisites
To use this application, you need to have knowledge of:
+ Node.js - Runtime environment for JavaScript.
+ ReactJS - JavaScript library for building interactive and reactive user interfaces.
### Installing and Running the Project
To download this project, run the following command down below.
```
git clone https://github.com/JuanPablo70/SmartHomeReact.git
```
Once the project is downloaded, open it in your favorite code editor such as VSCode and execute the following commands in the terminal:
```
npm install
npm run dev
```
In a web browser, visit the link [SmartHomeReact](http://127.0.0.1:5173/) to view the project.
### Project Functionality
Users can turn lights on or off in specific rooms using individual buttons or control all lights at once with a global button.
The **useReducer** hook is employed to manage the light state, enabling smooth and controlled transitions between on and off states.
The **useContext** hook is utilized to provide access to the global light state throughout the application, simplifying its usage across different components avoiding prop drilling.
### Build With
+ [Vite](https://vitejs.dev) - Next Generation Frontend Tooling
+ [React](https://es.react.dev) - The library for web and native user interfaces
### Version
1.0
### Author
[JuanPablo70](https://github.com/JuanPablo70)