This project was bootstrapped with Create React App.
El ejercicio consiste en desarrollar una página web responsive con un listado de personajes de Rick and Morty, que podemos filtrar por el nombre del personaje. Vamos a usar React para realizarlo. Vamos de definir las distintas partes del ejercicio:
src
├─ Components
| └─ App.js
| └─ CharacterCard.js
| └─ CharacterDetail.js
| └─ CharacterNotFound.js
| └─ FilterByName.js
| └─ FilterBySpecies.js
| └─ FilterByType.js
| └─ Filters.js
| └─ Header.js
| └─ IdnotFound.js
| └─ ListCharacter.js
| └─ PageNotFound.js
| └─ Reset.js
|
├─ images
├─ services
| └─ api.js
| └─ iconSpecies.js
| └─ iconStatus.js
| └─ local-storage.js
├─ scss
| ├─ components
| ├─ core
| ├─ layout
| └─ pages
En primer lugar, vamos a realizar una web con el listado de personajes de Rick and Morty. Para eso, vamos a utilizar el servicio de https://rickandmortyapi.com/documentation/#get-all-characters que nos devuelve información sobre los primeros 20 personajes de la serie. Sobre cada uno, vamos a pintar al menos: la foto, el nombre y la especie.
-
BONUS: Usar algún sistema de grid para pintar el listado de personajes.
-
BONUS: Ordenar el listado de personajes alfabéticamente por nombre.
-
EXTRA: Guardamos y recogemos los datos al LocalStorage para mantener la última búsqueda que hayamos realizado.
Ahora que ya tenemos el listado de personajes en pantalla, la segunda parte consiste en poder buscarlos por nombre. Para eso, añadimos un input a la interfaz, de forma que al ir escribiendo un nombre queden en la interfaz solo los personajes cuyo nombre contiene las letras escritas.
NOTA: El filtro debe filtrar independientemente de que la usuaria introduzca el texto en mayúsuclas o minúsculas.
NOTA: Si buscamos por un texto por ejemplo "XXX" y no hay ningún personaje que coincida con dicho texto se muestra un mensaje de error que dice: "No hay ningún personaje que coincida con la palabra XXX".
- EXTRA También se ha creado un
selectpara poder filtar los personajes por especie.
Implementamos una nueva funcionalidad: al hacer clic sobre la tarjeta de un personaje, su información aparecerá a pantalla completa.
Para hacer esto usamos rutas y React router.
En la pantalla de detalle aparecerá además de la foto, nombre y especie; el planeta de origen, el número de episodios en los que aparece y si está vivo o muerto.
- BONUS: Mostramos la especie, el estado y el género con un icono.
- BONUS: La URL del detalle de personaje es compartible, es decir, que si visitamos esa URL directamente en el navegador se ve el detalle del personaje. Y en el caso de que el usuario navegue a una URL inexistente como por ejemplo http://localhost:3000/#/detail/12345 (el id 12345 no existe) mostramos un mensaje del tipo "El personaje que buscas no existe".
NOTA: Al entrar en el detalle de un personaje y a continuación pulsar atrás, el campo de texto de búsqueda muestra el texto que tenía anteriormente.
Me encantaría recibir tu feedback, no dudes en abrir una PullRequest o Issue para seguir mejorando.
Gracias!
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.