Mini Challenge 4: State Management

README.md

Mini Challenge 4: State Management

The challenge

Set up the global state.

1. Create the Provider of the context. It's recomended to create the provider in it's own file, helps with readability and makes testing easier.
2. Consume the context in the components that require it. Remember the hook useContext? Time to put it in action.
3. Write tests for the Context. Test the context to see if there is something wrong with it.
4. Create the Favorites Video View. It should be very similar to the home view, the difference is that you should show the favorites.
5. Allow the users to mark videos as favorites. From the home view, the user should be able to favoritize a video or remove it from favorites.
6. Save the favorites on local storage. Use local storage to save the favorites for authenticated users.

Acceptance Criteria

Mandatory

• Implement the Mocked Login and store the logged-in user in a global accessible Context. Your application should handle the logged-in user state, define public and private routes, display content based on the authenticated user, etc.
• Test the provider. Write some tests to make sure the provider works as expected.
• Create Favorites Video View
• Add a video to favorites from home
• Remove a video from favorites from home view
• When an authenticated user closes and open the browser the favorites should be persisted.

Extra points

• Create a provider for the apparence theme
• Create a provider for the video search
• Use the hook useReducer to manage some part of the state
• Integrate with a real authentication provider (such as Auth0, OAuth).
• When hovering on the video card, the add/remove favorites icon/button should appear.