Módulo 3 - React

Evaluación final

URL del ejercicio: Harry Potter

Desarrollar una página web con React con un listado de personajes de Harry Potter, que permita filtrar por el nombre del personaje y la casa a la que pertenece.

Características técnicas

• Petición Fetch a una API.
• Funcionalidades propias de React como componentes, Lifting, Router, Hooks de estado y efecto.
• Métodos funcionales de array de JavaScript: map, filter, find, sort.
• Gestión de Local Storage del navegador.
• Control de versiones con Git.
• Maquetación responsive con CSS Flexbox, Sass y BEM.

---

---

0. Preparación

• Clonar repositorio
• Crear proyecto con React Starter Kit
• Bocetar esquema

1. Listado de personajes

• Utilizar servicio de hp-api.herokuapp.com que devuelve información de los personajes de Harry Potter filtrados por casa a la que pertenecen.
• Pintar información de los personajes: foto, nombre y especie.
• Mostrar imagen por defecto si no existe.

2. Filtrado de personajes

• Buscar personajes por nombre completo (en mayúsculas o minúsculas).
• Escuchar y controlar input.

3. Filtrado por casa

• Buscar personajes por casa (casa por defecto: Gryffindor).
• Escuchar y controlar select.

4. Componentes del listado de personajes

• Componente para el filtro del nombre (Filters).
• Componente para el listado de personajes (CharacterList).
• Componente para cada personaje del listado (CharacterCard).
• Componente para el detalle de cada personaje (CharacterDetail).

5. Detalle del personaje

• Información de cada personaje a pantalla completa: foto, nombre, casa, si está vivo o muerto, género, especie y nombres alternativos.
• Usar rutas con react-router-dom (ocultar componente CharacterList y mostrar componente CharacterCard).

6. Calidad

• Usar etiqueta <form />
• Evitar comportamiento por defecto del formulario.
• Mostrar mensaje de aviso si no se obtienen resultados de búsqueda.
• Filtrar independientemente de que se escriba en mayúsculas o minúsculas.
• Mantener los resultados filtrados al volver del detalle del personaje.

7. Bonus: mejoras visuales

• Mostrar icono de cada casa en el detalle del personaje.
• Maquetar con algún sistema de grid.
• Adaptar a dispositivos pequeños.

8. Bonus: URL compartible

• Ver el detalle del personaje a través de su URL.
• Mostrar mensaje de error si la URL no existe.

9. Bonus: ordenación

• Ordenar listado de personajes alfabéticamente.

10. Bonus: más filtros

• Filtrar, por ejemplo, por género.

11. Bonus: botón reset

• Volver al listado inicial.

Otras mejoras

• Cambiar favicon.
• Maquetar estilos CSS.
• Filtrar por personajes con imagen.
• Filtrar por estudiante de Hogwarts.
• Guardar información del formulario en almacenamiento local.
• Crear un componente para cada filtro.
• Uso de default props y prop types.
• Refactorizar.

---

Installation and setup

Requirements: you need node and npm installed on your computer.

Clone the repo

git clone URL

Install the dependencies

npm install

Run the app

npm start

Go to http://localhost:3000 to view the app in the browser.

Deploy for production environment

npm run build

---

My React Starter Kit ✨

• NPM dependencies: node-sass react-router-dom@5.3.0 prop-types
• Services: API and Local Storage
• Publish in GitHub Pages: npm run githubpages

---

Happy coding!