luciaronova3005/search-react

Develop a web page with a list of Rick and Morty characters using REACT

Statement and requirements of the exercise 📄

The exercise consists of developing a web page with a list of Rick and Morty characters.

INDEX

1. Data structure
2. List of characters
3. Character filtering
4. Character detail
5. Pagination

1. Data Structure

src
├─ components
| ├─ App.js
| ├─ Card.js
| ├─ CharacterDetail.js
| ├─ CharacternotFound.js
| ├─ CharacterList.js
| ├─ FilterName.js
| ├─ Filters.js
| └─ FiltSpecies.js
| └─ Pagination.js
|
├─ imge
| └─ logo.png
|
├─ Services
| └─ local-storage.js
|
├─ stylesheets
| └─ ...
|
└─ index.js

2. List of Characters

We will use the service https://rickandmortyapi.com/documentation/#get-all-characters
[API](https://rickandmortyapi.com/documentation/#get-all-characters Photo
Name
Species
Character filtering

3. Character Filtering

Now that we have the list of characters on the screen, the second part consists of being able to search for them by name. To do this, we add an input to the interface, so that when we write a name, only the characters whose name contains the written letters remain in the interface.

In addition, the user must filter by type of species

NOTE: The filter must filter regardless of whether the user enters the text in uppercase or lowercase.

4. Character Detail

We implemented the functionality with which when clicking on a character's card, its information will appear in full screen using dynamic routes.

NOTE: If we search for a text for example "XXX" and there is no character that matches that text, an error message is displayed that says: _ "There is no character that matches your search

In the detail screen it will appear in addition to the photo, name and species, the planet of origin, the number of episodes in which it appears and if it is alive or dead.

5. Pagination

You can also go through the pages with the different results.

Extra Functionalities

The URL of the character detail is shareable, that is, if we visit that URL directly in the browser, the character detail will be seen.
If we refresh the browser in the detail of a character, it should show the detail of the character again.
And in the event that the user navigates to a non-existent URL, such as for example, we must show a message such as "The character you are looking for does not exist."

BONUS: a reset button has been added that eliminates the searches included in the localstorage

BONUS: Use a grid system to paint the list of characters.

EXTRA: We save and collect the data at the LocalStorage to keep the last search we have made.

---

Technologies 🛠️

React / JS / SCSS

STAR IN LOCAL 🚀

Clone this repository on your computer.

Install the package and its dependencies using:

npm install

Once the installation is complete you will find that a folder named node_modules / has been added.
Finally, run the following command to load a local server and be able to do the visualization:

npm start

npm run build

Build the production app in the build folder.
Correctly bundles React in production mode and optimizes build for best performance.

NOTE: It is necessary to have NodeJS installed

Do you think I can apply any improvement?

If you have come this far, and you have detected a problem or consider that something can be improved, I would be delighted if you open a new issue and get your opinion, each improvement is important and necessary for me, thank you very much for your time.