Buscador de personajes de Harry Potter que te permite filtrarlos y visualizar información más detallada de cada personaje. Te permite filtrar por nombre, casa, género, si tiene otros nombres alternativos, y además puedes ordenar el listado. También puedes compartir las url de cada personaje porque son url únicas que se mantienen.
Buscador de personajes de Harry Potter
Requerimientos:
- Necesitas tener
nodeynpminstalados.
Clonar el repositorio
git clone URL
Instalar las dependencias
npm install
Ejecutar la aplicación
npm start
- Ve a http://localhost:3000 para ver la app en el navegador.
Desplegar el entorno de producción
npm run githubpages
El ejercicio consiste en desarrollar una página web con un listado de personajes de Harry Potter, que podemos filtrar por el nombre del personaje y casa:
- Utiliza React con SASS.
- API: https://hp-api.herokuapp.com/
- Un listado de resultados de personajes con la info: Foto / Nombre / Especie
- Traducir lo que venga de la API al castellano
- Hay personajes sin foto (Vernon Dursley, Petunia Dursley o James Potter) que tienen que mostrar una imagen por defecto (sacada de placeholder.com o una imagen creada por nosotras)
- Filtrado por nombre con un
input- Que no distinga entre mayúscula o minúscula para sacar el resultado
- Filtrado por casa con un
select- Por defecto cuando carga la página debe aparecer la casa Gryffindor
- 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.
Al hacer clic sobre un personaje debe pasar lo siguiente:
- Su información aparecerá a pantalla completa (con rutas y React Router DOM)
- La información que aparecerá: Foto / Nombre / Casa / Vivo o muerto / Género / Especie / Nombres alternativos (en caso de que los tenga)
- Link para volver a los resultados
- Traducir lo que venga de la API al castellano
- Los filtros deben estar englobados por una etiqueta
<form />. - Estando en el campo de filtrado si se pulsa intro se debe impedir que el navegador navegue o cambie la ruta sin querer.
- Si se busca por un texto y no hay ningún personaje que coincida (por ejemplo "XXX") se debe mostrar un mensaje del tipo "No hay ningún personaje que coincida con la palabra XXX".
- 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.
- En el detalle del personaje:
- Mostrar la casa con su respectivo emblema
- Si un personaje está vivo o muerto con su respectivo icono.
- Usar algún sistema de grid para pintar el listado de personajes.
- Que funcione bien el responsive en dispositivos pequeños.
- Que si visitamos la URL del detalle de un personaje directamente desde un enlace veamos el detalle del personaje. Y si se refresca también.
- Si el usuario navega a una URL inexistente mostrar un mensaje del tipo “el personaje que buscas no existe)
- Ordenar el listado de personajes alfabéticamente por nombre
- Filtro de género
- Botón de reset para que la página vuelva al listado principal