Skip to content

Latest commit

 

History

History
43 lines (26 loc) · 1.7 KB

README.md

File metadata and controls

43 lines (26 loc) · 1.7 KB

To-Dos

Difficulty: 🟣 Easy

Project URL

🚀 You can check the project working in the following link: https://wfercanas.github.io/To-Dos/

Project Description

This app provides the user the use case of controlling all the tasks he/she may have pending to complete. The app group tasks by category so the user can check how many tasks are created per category and see in a progress bar how much is left until the category is complete.

In this repository, you will find 3 branches. The context branch, to solve the exercise using the useContext Hook; the composition branch, where I apply composition and render props to stop using Context; and the main branch, where I apply useReducer to the useLocalStorage Custom Hook.

Installation

In order to make a local isntallation, you should execute:

  npm install
  npm run start

Technologies used

React (Hooks), Styled-Components, Storybook

Special Challenges

  1. Create a context with the state of the app and some key functions that enable the usability of the app.
  2. Link tasks with categories and ensure that relationship is strictly kept when new tasks are created.
  3. Separate stateful from stateless components in order to simplify the responsabilities held by each one of them.

Key Concepts

  1. ReactDOM.createPortal()
  2. ReactDOM.createContext()
  3. Hooks: useContext(), useState(), useLocalStorage() --custom hook--.
  4. Local Storage: localStorage.setItem(), localStorage.getItem(), JSON.parse(), JSON.stringify()

Acknowledgements

Thanks to Juan David Castro for the Intro to React course in Platzi💚, the course was great! Hope you give it a star to this project.