Pokémon Stats: Una pokédex pensada para jugadores casuales

A lo largo de mi vida he jugado diferentes títulos de la saga de videojuegos de Pokémon (no de manera competitiva, sino más casual), así que me encontraba constantemente interrumpiendo mis partidas para buscar tablas de debilidades, tipos de Pokémon y cadenas evolutivas. Aunque existen muchas páginas que centralizan esta información, la mayoría no están optimizadas para encontrar de forma rápida lo que necesitaba, o bien mostraban datos que como jugador no competitivo simplemente no me servían.

De ahí nació Pokémon Stats, una web app construida desde cero, con el objetivo de tener toda esta información relevante al alcance de unos cuantos clics, tanto en escritorio como desde el celular. Este fue mi primer proyecto web con un propósito real y uso personal continuo.

• Buscador por nombre o número de Pokédex nacional

• Visualización del tipo y debilidades con una tabla interactiva con botones

• Cadena evolutiva

• Soporte para variantes de Pokémon (Alola, Galar, etc.)

• Imagen en alta calidad desde el sitio oficial de Pokémon con fallback a sprite 2D

• Buscador con sugerencias y navegación por teclado

Una de las primeras cosas que aprendí fue el uso de matrices bidimensionales para construir una tabla de efectividad entre tipos. Con botones interactivos que se resaltan al hacer hover, fue una buena práctica para trabajar con posicionamiento relativo, manejo de event.target y cálculo de coordenadas dentro de un grid.

El buscador no se limita a coincidencias al inicio de palabra, sino que detecta cualquier substring en el nombre. Implementé un sistema de sugerencias con un array local de nombres para evitar sobrecargar la API (conocimientos de UX + performance API).

Uno de los retos más complejos fue obtener y representar la cadena evolutiva. La PokéAPI requiere varias llamadas y anidamientos, y opté por una función recursiva para navegar por la estructura de datos. Este fue un parteaguas en mi aprendizaje sobre funciones recursivas en JS.

Tuve que crear estructuras condicionales personalizadas para soportar:

• Formas regionales

• Diferencias por género (ej. Nidoran)

• Variantes evolutivas (Lycanroc, Oricorio, etc.)

Reconocí la importancia de minimizar llamadas innecesarias a APIs gratuitas. Migré ciertos datos a arrays locales, como nombres o números de pokédex alternos.

Este proyecto nació de una necesidad personal real, lo que me dio un enfoque mucho más crítico al diseñar la experiencia de usuario. A pesar de usar Bootstrap al inicio, he iterado en varios detalles visuales que reflejan una mejora progresiva.

• Reducir el número de llamadas a la API para obtener la cadena evolutiva

• Mejor manejo de estados de error/success en la interfaz

• Mostrar info adicional en tooltips o popups para evitar saturar la vista

• Incluir soporte visual completo para las variantes dentro de la cadena evolutiva

Este proyecto no es el más sofisticado ni el más complejo en el que he trabajado, pero es el más significativo que he hecho, fue construido con pasión, y sobre todo, con la necesidad real de resolver un problema cotidiano para mí como usuario. Me ayudó a profundizar en conceptos como manejo de datos asincrónicos, recursividad, buenas prácticas de consumo de APIs, y diseño de interfaces centradas en el usuario.

“Si tienes la capacidad de crear una herramienta que mejore tu experiencia de juego, ¿por qué no hacerlo?”