Buscador de personajes Rick & Morty

¡Hola! 👋, bienvenida a este repositorio.

🚩 El ejercicio consiste en desarrollar una página web con un listado de personajes de Rick and Morty, que podemos filtrar por el nombre del personaje. Vamos a usar React para realizarlo.

💡 Para iniciar el proyecto en local, recuerda introducir los siguientes comandos en la terminal:

npm install

npm start

Abre http://localhost:3000 para ver la página en el navegador.

Partes del ejercicio:

1. 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:

   • Foto
   • Nombre
   • Especie

2. 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. En el pantallazo de arriba, al escribir 'Ric' aparecen personajes cuyo nombre completo contiene esas letras en ese orden.

3. Componentes del listado de personajes. El listado debe tener los siguientes componentes como mínimo:

   • Componente para el filtro de nombre.
   • Componente para el listado.
   • Componente para la tarjeta de cada personaje del listado.
   • Componente para el detalle de cada personaje.

4. Detalle de personajes. Vamos a implementar una nueva funcionalidad: al hacer clic sobre la tarjeta de un personaje, su información aparecerá a pantalla completa. Para hacer esto usaremos 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.

5. Detallitos de calidad.
   • Como nos gusta cuidar la semántica, el campo de texto debe estar recubierto por una etiqueta .
   • Si estando en el campo de filtrado pulsamos intro debéis impedir que el navegador navegue o cambie la ruta sin querer.
   • Si se busca por un texto por ejemplo "XXX" y no hay ningún personaje que coincida con dicho texto se debe mostrar un mensaje del tipo "No hay ningún personaje que coincida con la palabra XXX".
   • El filtro debe filtrar independientemente de que la usuaria introduzca el texto en mayúsuclas o minúsculas.
   • Al entrar en el detalle de un personaje y a continuación pulsar atrás, el campo de texto debe mostrar el texto que tenía anteriormente.

Pasos seguidos para la elaboración del proyecto

1. Fetch / Api

   1. Limpiar datos

2. Pintar

   1. Maquetar HTML
   2. Programar en el App
   3. Dividir en componentes

3. Filtrar:

   1. Escuchar filtros
   2. Guardar filtro en el estado
   3. Pintar personajes filatrados

4. Pintar detalle de la usuaria

5. Local Storage:

   1. Guardar
   2. Leer

Diagrama de flujo

• Al arrancar la página
  • ¿Hay datos de personajes en el LocalStorage?
    • Sí. Coger esos datos >> Guardo en estado
    • No. Pedir datos a API y limpiarlos
  • ¿Hay datos de filtros de personajes en el LocalStorage?
    • Sí. Coger esos datos >> Guardo en estado
    • No. No hago nada
  • Pintar personajes
  • Escuchar los filtros:
    • Guardar datos filtros en estado
    • Pintar los personajes filtrados
  • Al cambiar de ruta:
    • Pinto el detalle del personaje