Saltar al contenido
ERIK PORTILLO
Volver a los proyectos

Pokédex Kanto

Aprendizaje · demo publicada

Aplicación React para explorar, filtrar y guardar los 151 Pokémon de la primera generación (Kanto), con datos de PokeAPI y favoritos y capturados persistidos en localStorage.

Tipo
Proyecto de aprendizaje de frontend, desplegado como demo.
Mi rol
Arquitectura de componentes, estado con Context API, integración con PokeAPI v2, validación con react-hook-form y diseño responsive.
Ver demo(se abre en una pestaña nueva)
Inicio: Portada de la Pokédex.
Inicio. Portada de la Pokédex · captura real

EL PROYECTO

Una aplicación para explorar los 151 Pokémon de la primera generación. Nació como práctica completa de frontend: consumir una API externa, gestionar estado compartido y persistir datos en el navegador.

Incluye búsqueda en tiempo real, filtrado por tipo, ordenación, favoritos y registro de capturados, con un diseño que funciona en móvil, tablet y escritorio.

LA DECISIÓN CLAVE

Elegí Context API en lugar de Redux. El estado global se reduce a tres piezas (búsqueda, filtros y favoritos), y para ese tamaño Redux añade más estructura de la que resuelve.

Favoritos y capturados se guardan en localStorage, así que persisten entre sesiones sin necesidad de un backend.

QUÉ HACE

Las funcionalidades, en el orden en que un usuario las encuentra.

  1. Catálogo de 151 Pokémon

    Nombre, número, imagen y tipo de cada uno, con opciones para marcar favorito o capturado.

  2. Búsqueda en tiempo real

    Filtra por nombre mientras escribes, sin recargar.

  3. Filtrado por tipo

    Los 15 tipos de la primera generación, combinables con la búsqueda.

  4. Ordenación

    Por número de Pokédex o alfabética.

  5. Detalle

    Estadísticas, habilidades y evoluciones con datos de PokeAPI.

  6. Favoritos

    Persistidos en localStorage, con vista propia.

  7. Capturados

    Un registro personal, separado de los favoritos.

  8. Responsive

    Probado a 390, 768 y 1440 px con la misma funcionalidad.

LO QUE APRENDÍ

API externa

  • Peticiones, errores y datos de PokeAPI v2 sin backend intermedio

Estado compartido

  • Context API para favoritos y capturados, sin pasar props por toda la aplicación

Persistencia local

  • localStorage para que favoritos y capturados sobrevivan entre sesiones

Componentes reutilizables

  • PokemonCard, PokemonGrid y filtros reutilizados en varias vistas

Formularios

  • Validación en tiempo real con React Hook Form

Responsive

  • Componentes accesibles de Chakra UI y áreas táctiles adecuadas

CAPTURAS

Catálogo: Los 151 Pokémon con búsqueda, filtros y ordenación.
Catálogo. Los 151 Pokémon con búsqueda, filtros y ordenación · captura real
Detalle: Estadísticas, tipo, habilidades y evoluciones.
Detalle. Estadísticas, tipo, habilidades y evoluciones · captura real
Favoritos: Guardados en localStorage.
Favoritos. Guardados en localStorage · captura real
Capturados: Registro personal de capturas.
Capturados. Registro personal de capturas · captura real
Contacto: Formulario validado con react-hook-form.
Contacto. Formulario validado con react-hook-form · captura real
Móvil: La misma funcionalidad en pantalla pequeña.
Móvil. La misma funcionalidad en pantalla pequeña · captura real

RESULTADO

Una aplicación completa que combina consumo de API, estado compartido y diseño responsive.

Me dio criterio para decidir cuánta arquitectura necesita un proyecto (Context frente a Redux) y cuidar los detalles de uso: búsqueda instantánea y datos que no se pierden al cerrar la pestaña.

¿ENCAJO EN TU EQUIPO?

ContactarDescargar CV