https://github.com/wfercanas/rick-and-morty

[🟣 Easy]: Fetch the Rick and Morty API, see characters and select your favorites.
https://github.com/wfercanas/rick-and-morty

front-end react

Last synced: 5 days ago
JSON representation

[🟣 Easy]: Fetch the Rick and Morty API, see characters and select your favorites.

• Host: GitHub
• URL: https://github.com/wfercanas/rick-and-morty
• Owner: wfercanas
• Created: 2021-07-28T02:56:31.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-07T02:47:53.000Z (over 3 years ago)
• Last Synced: 2024-12-24T23:24:45.073Z (about 2 months ago)
• Topics: front-end, react
• Language: JavaScript
• Homepage:
• Size: 619 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hooks with Rick and Morty

### Difficulty: 🟣 Easy

## Project URL

🚀 You can check the project working in the following link: https://wfercanas.github.io/Rick-and-Morty/

## Project Description

This app lets you see some basic data about the main characters of Rick and Morty. When displayed, you can add them to favorites or remove them.

If you want to, you can toggle the site between light and dark theme.

## Installation

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

```bash

npm install

npm run start

```

## Technologies Used

React (Hooks).

## Special Challenges

1. Create a context to provide the theme the app must use. Then, when each component makes use of the context provided, has to define its style to adapt depending if it the theme is set to light or dark.

2. Fetch the characters data using an effect. If something goes wrong, the app must be able to render a fallback UI.

3. When filtering characters, some filters may have been calculated prior, especially when you are typing. Use memoization to reduce the number of times the filter executes.

4. Create a custom hook that fetches the API and return the set of characters. This instead of creating everytime a state and then appliying and effect to control this part of the app.

5. Control the adding or removing of favorite characters with a Reducer.

## Key Concepts

1. Hooks: useState(), useEffect(), useReducer(), useMemo(), useContext(), useCharacters() -this is a custom hook-

2. Error boundaries.

## Acknowledgements

Thanks to Óscar Barajas ([@gndx](https://twitter.com/gndx)) for explaining this concepts within the React Hooks Professional Course in Platzi.💚