DESCRIPCIÓN: Construir una aplicación web con React que consuma datos de una API pública. Los datos que obtenga de la API se mostrarán en una interfaz de usuario.
Este proyecto es una aplicación web interactiva desarrollada con React + Vite y Material-UI (MUI). Su propósito principal es mostrar información detallada de los personajes del universo de Harry Potter utilizando datos obtenidos de una API pública. Los usuarios pueden explorar y navegar entre diferentes personajes entre ellos constan el "Staff" y "Estudiantes" de Hogwarts y sus "Casas". La aplicación también permite acceder a una vista detallada de cada personaje.
CARACTERÍSTICAS:
- Consumo de API: Obtiene datos de la API de Harry Potter (https://hp-api.herokuapp.com/).
- Interfaz moderna: Utiliza Material-UI (MUI) para componentes estilizados.
- Navegación dinámica: Integración con React Router para una experiencia de navegación fluida.
- Paginación: Visualización de personajes en grupos de 10 por página.
- Soporte multilenguaje: Traducción de términos clave como "pure-blood" a "Sangre pura".
- Vista responsiva: Optimizada para dispositivos móviles y escritorio.
TECNOLOGÍAS UTILIZADAS:
- React: Framework para construir interfaces de usuario.
- Material-UI (MUI): Framework para componentes estilizados.
- React Router: Navegación en una SPA.
- JavaScript: Lógica del cliente.
- API pública de Harry Potter: Fuente de datos de personajes.
INSTALACIÓN:
-
Clonar el repositorio git clone https://github.com/chris31p/proyecto5_appweb_react.git cd
-
Instalar dependencias Asegúrate de tener Node.js instalado. Luego, ejecuta: -> npm install
-
Iniciar el servidor de desarrollo con el comando: -> npm run dev La aplicación estará disponible en: localhost:5173
-
Despliegue Mostrar el proyecto a través de una URL, usando un servicio de terceros en este caso Render.
HOME:
PERSONAJES:
DETALLES DE UN PERSONAJE:
CASAS:
ABOUT:
Desplegar la API en Render.com como un sitio estático.
Para ello modificamos el archivo vite.config.js ya que Render necesita una "base" para crear el despliegue:
En la configuración de Render colocamos: - Build Command: npm run build - Publish Directory: dist
LINK -> https://proyecto5-appweb-react.onrender.com/
