Este proyecto es una Pokédex interactiva desarrollada con React y la api https://pokeapi.co/, que permite explorar, buscar y marcar como favoritos a los Pokémon. El diseño está inspirado en la estética clásica de Pokémon, con animaciones y una experiencia visual atractiva.
Al ingresar, se muestra una pantalla de bienvenida animada con el logo de Pokémon siguiendo huellas de pokemones, una pokebola saltando y siluetas de Pokémon moviéndose aleatoriamente. El botón "START" aparece con animación de máquina de escribir. Al hacer clic, se navega a la galería principal.
La galería muestra una cuadrícula de tarjetas de Pokémon, cada una con su sprite, nombre, número y una breve descripción.
- Se puede buscar por nombre en tiempo real.
- Es posible marcar Pokémon como favoritos (estrella).
- Hay paginación para navegar entre cientos de Pokémon.
- El botón "Favorites" filtra solo los favoritos.
- El diseño es responsivo y colorido, con detalles visuales inspirados en la Pokédex.
Al hacer clic en cualquier Pokémon, se abre una página de detalle tipo Pokédex:
- Muestra la imagen, nombre, número, género, tipos, altura, peso y una descripción/flavor text.
- El diseño simula una Pokédex física, con colores y tipografías temáticas.
- Incluye botón para volver a la galería.
- React + React Router: Navegación entre páginas (
LandingPage,PokemonGrid,Pokedex). - Axios: Para consumir la API de PokeAPI.
- CSS personalizado: Cada página tiene su propio archivo de estilos para lograr la estética Pokémon.
- Favoritos: Se guardan en
localStoragepara persistencia. - Componentes reutilizables: Tarjetas de Pokémon, buscador, paginación, etc.
src/js/LandingPage.js— Página de inicio animada.src/js/PokemonGrid.js— Galería con búsqueda, favoritos y paginación.src/js/Pokedex.js— Vista detallada de cada Pokémon.src/css/— Estilos personalizados para cada componente.
- Clona el repositorio y ejecuta
npm install. - Inicia el proyecto con
npm start. - Navega entre las páginas y explora la Pokédex.
¡Disfruta explorando el mundo Pokémon!