The exercise consists of developing a web page with a list of Rick and Morty characters.
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
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
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.
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.
You can also go through the pages with the different results.
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."
React / JS / SCSS
Install the package and its dependencies using:
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:
Build the production app in the build
folder.
Correctly bundles React in production mode and optimizes build for best performance.
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.