TP Final - React Pokémon

Descripción

Este proyecto es el Trabajo Práctico Final del curso de Front-End.
Es una aplicación web hecha con React y Vite, que consume datos de la PokeAPI y permite visualizar un listado de Pokémon y al hacer click en cada uno poder visualizar sus detalles.

Permite:

Visualizar un listado de Pokémon.

Hacer click en cada Pokémon para ver sus detalles completos (tipo, habilidades, altura, peso, experiencia, imagen).

Navegar fácilmente entre las secciones mediante un navbar responsive y un footer.

El proyecto está pensado para ser responsive, adaptándose correctamente a dispositivos móviles, tablets y desktops.

Funcionalidades implementadas

segundo commit

• Configuración inicial de React con Vite.
• React Router para navegación entre páginas: Home, Listado.
• Components: CardPokemon para mostrar información de cada Pokémon.
• Componentes reutilizables: Header; Footer; Navigation con links a las páginas.
• Página ListadoPokemon que consume la PokeAPI y muestra 20 Pokémon.
• Botón “Cargar más” para añadir más Pokémon al listado.
• Ordenamiento de Pokémon por ID.
• tercer commit
• Deploy realizado con GitHub Pages
• Funcionalidad para mostrar el detalle de cada Pokémon (DetallePokemon.jsx).
• Enlaces desde las tarjetas (CardPokemon.jsx) para navegar al detalle.
• Arreglo de código de ListadoPokemon.

cuarto commit

• Navbar responsive con Bootstrap.
• Footer con CSS.

quinto commit

• Cards para lista de pokémons responsive.
• Cambio de fuente y paleta de colores

sexto commit

• Landing Page: cards responsive con información acerca del proyecto y link directo a la lista de Pokemons.

septimo commit

• Card detalle responsive.

Tecnologías

• React

• JavaScript

• Bootstrap

• CSS

• React Router DOM

  Herramientas

  • GoogleFonts
  • Flaticon
  • React Icons

  Link al deploy en GitHub Pages

  Demo en GitHub Pages

⚙️ Instalación y ejecución

• Clonar el repositorio git clone https://github.com/tuusuario/nombre-del-repo.git cd nombre-del-repo
• Instalar dependencias npm install
• Ejecutar en modo desarrollo npm run dev
• La aplicación se abrirá en http://localhost:5173/ (o el puerto que indique Vite).
• Build para producción npm run build