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

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.

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

  npm install
  npm run start

React (Hooks), Styled-Components, Storybook

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.

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

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.