Pokédex Kanto
Aplicación web moderna para explorar, filtrar y guardar los 151 Pokémons de Generación 1 (Kanto). Sistema de favoritos y capturados con localStorage.
Objetivo
Demuestra dominio de React Hooks, Context API, integración de API externa (PokeAPI), validación de formularios, y UX responsiva con dark theme profesional.
Mi Rol
Full-stack: arquitectura de componentes, Context API para estado global, integración PokeAPI v2, formularios validados con react-hook-form, dark theme coherente.
Stack Tecnológico
Resumen del Proyecto
Pokédex Kanto es una aplicación web moderna desarrollada con React 18 y Chakra UI que permite explorar los 151 Pokémon de la Generación 1. El proyecto surge como práctica integral de desarrollo frontend, integrando consumo de API externa, gestión de estado con Context API, y persistencia en localStorage.
La aplicación implementa features como búsqueda en tiempo real, filtrado por tipo, ordenamiento flexible, sistema de favoritos, y registro de capturados. Todo con un diseño responsive que funciona perfectamente en móvil, tablet y desktop.
Características Principales
Catálogo Completo de 151 Pokémon
Acceso a toda la Generación 1 (Kanto). Cada Pokémon muestra nombre, número de Pokédex, imagen, tipo y opciones para agregar a favoritos o marcar como capturado.
Búsqueda en Tiempo Real
Búsqueda instantánea por nombre. El usuario escribe "Pikachu" y la aplicación filtra resultados automáticamente sin necesidad de recargar.
Filtrado por Tipo
15 tipos nativos de Gen 1. El usuario selecciona un tipo (Fire, Water, Grass, etc) y ve solo Pokémon de ese tipo. Combinable con búsqueda.
Ordenamiento Flexible
Ordena por número de Pokédex (1-151) o alfabéticamente. Útil para explorar de diferentes formas sin perder contexto.
Página de Detalle Individual
Cada Pokémon tiene una página completa con stats (HP, Attack, Defense, Sp.Atk, Sp.Def, Speed), habilidades, evoluciones, y datos técnicos de la PokeAPI.
Sistema de Favoritos
Marca Pokémon con corazón. Los favoritos se guardan en localStorage y persisten entre sesiones. Vista dedicada para ver solo favoritos.
Sistema de Capturados
Registra Pokémon capturados. Similar a favoritos pero con propósito distinto: simula una Pokédex personal durante la "aventura".
Diseño Responsive
100% adaptable a móvil (390px), tablet (768px) y desktop (1440px). Mismo contenido y funcionalidad en todos los tamaños, con optimización visual.
Capturas del Proyecto
Vistas Principales
Página de Inicio
Hero section presentando la Pokédex con destacados de Pokémon populares.
Catálogo Pokédex
Vista principal del catálogo con 151 Pokémon, filtros, búsqueda y ordenamiento.
Funcionalidades
Detalle de Pokémon
Información completa con stats, tipo, habilidades y evoluciones.
Sistema de Favoritos
Pokémon guardados con persistencia en localStorage.
Pokémon Capturados
Registro personal de capturados durante la aventura.
Formulario de Contacto
Contacto validado en tiempo real con react-hook-form.
Experiencia Mobile
Diseño Responsive
Completamente optimizado para móvil y dispositivos pequeños
Aprendizajes
Consumo de API Externa
Integración con PokeAPI v2. Manejo de requests, errores, y datos en tiempo real sin backend intermedio.
State Management con Context API
Gestión centralizada de favoritos y capturados. Props drilling evitado, estado compartido en toda la aplicación.
Persistencia Local
localStorage para guardar favoritos y capturados. Sincronización entre pestañas y sesiones persistentes.
Componentes Reutilizables
Arquitectura de componentes escalable. PokemonCard, PokemonGrid, filters adaptables a múltiples vistas.
Validación en Tiempo Real
React Hook Form para validación de formulario de contacto. Feedback visual instantáneo sin recargas.
Responsive Design Mobile-First
Chakra UI para componentes accesibles. Testeo en 390px, 768px, 1440px. Touch targets optimizados.
Resultado Final
Una aplicación web completamente funcional que integra consumo de API, state management moderno, y diseño responsive. Pokédex Kanto demuestra capacidad para estructurar proyectos React, manejar datos en tiempo real, y entregar UX pulida en múltiples dispositivos.
Este proyecto solidificó mis habilidades en frontend: desde decisiones arquitectónicas (Context API vs. other solutions) hasta detalles de UX (búsqueda instantánea, persistencia local). La complejidad surge de combinar múltiples features sin sacrificar performance ni legibilidad del código.
151
Cobertura
Pokémon accesibles y funcionales
100%
Responsividad
Mobile, tablet, desktop optimizado
Lazy
Performance
Carga eficiente de imágenes y datos
¿Quieres colaborar?
Si te interesa trabajar en proyectos frontend o tienes preguntas sobre arquitectura y desarrollo, me encantaría conectar.