Landing Page desarrollada con HTML5, TailwindCSS y JavaScript Vanilla, utilizando Node.js como entorno de desarrollo para gestionar dependencias y el proceso de construcción mediante Webpack y Babel.
Demo del Proyecto
Tecnologías
Funcionaliades
- Menú de navegación adaptable para dispositivos móviles y escritorio.
- Sección principal con Pokémon destacados en animación flotante.
- Listado dinámico de Pokémon por tipo (eléctrico, agua, fuego, etc.).
- Uso de Web Components () para mostrar información detallada de cada Pokémon (imagen, altura, peso y tipos).
- Estilo responsivo con TailwindCSS y animaciones integradas.
- Manejo de errores al consumir la API.
- Consumo de datos con async/await para un flujo más claro y eficiente en las llamadas a la API.
Uso de Web Components en el Proyecto
He desarrollado un componente personalizado para mostrar tarjetas de Pokémon con información detallada (imagen, altura, peso y tipos). Este componente es de mi autoría y además está publicado como paquete npm, lo que permite reutilizarlo fácilmente en cualquier proyecto web.
Nombre del paquete:
pokemon-card-component
Página npm: https://www.npmjs.com/package/pokemon-card-component
Ventajas del componente
- Modularidad: cada Pokémon se renderiza en su propia tarjeta con datos dinámicos.
- Reutilización: el mismo componente puede insertarse en distintas secciones.
- Encapsulación: lógica de renderizado contenida dentro del Web Component.
Instalación
- Requisitos Previos
- Descargar Proyecto.
- Tener Docker y Docker Compose instalados.
- Make: Utilizado para automatizar procesos y gestionar contenedores de manera más eficiente.
- Pasos de Instalación
- Clona el repositorio desde GitHub.
- Dentro del repositorio, encontrarás un archivo Makefile que contiene los comandos necesarios para iniciar y gestionar tu aplicación.
- Usa los siguientes comandos de Make para interactuar con la aplicación:
- make init-app: Inicializa los contenedores y configura la aplicación.
- make up: Levanta la aplicación y sus contenedores asociados.
- make down: Detiene los contenedores y apaga la aplicación.
- make shell: Ingresa al contenedor para interactuar directamente con el sistema en su entorno de ejecución.
- make install-dependencies: Instala todas las dependencias necesarias para disponer del sistema de logs y ejecutar pruebas.
- make init-test: Ejecuta las pruebas unitarias y de integración.
- make compile-sass: Compila Sass
- Además de estos comandos, dentro del archivo Makefile puedes encontrar otros comandos que te permitirán interactuar de manera más específica con los contenedores y los diferentes servicios que conforman la aplicación.
- Accede a los siguientes URL:
- Aplicación Web: http://localhost:8081/
- PhpMyAdmin: http://localhost:8082/
