nurahissami / rick-y-morty

Web responsive con un listado de personajes de Rick and Morty, que podemos filtrar por el nombre del personaje. Usando React.

This project was bootstrapped with Create React App.

Rick y Morty

Nur Ahissami

Buscador de personajes de Rick y Morty

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:

INDICE

1. Estructura de datos
2. Listado de personajes
3. Filtrado de personajes
4. Detalle de personajes
5. Sugerencias

---

1. Estructura de datos

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
 

---

2. Listado de personajes

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.

3. Filtrado de personajes

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 select para poder filtar los personajes por especie.

4. Detalle de personajes

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.

5. Sugerencias

Me encantaría recibir tu feedback, no dudes en abrir una PullRequest o Issue para seguir mejorando.

Gracias!

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

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.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

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.