⭐ DestacadoCompletado
Pokédex Next
Pokédex interactiva construida con Next.js 15, TypeScript y T3 Stack. Consume la PokéAPI v2 en tiempo real con listados, filtros por tipo/generación, búsqueda predictiva, detalle con evoluciones y estadísticas. Optimizada con caching en memoria y Redis.
17 de abril de 202510 tecnologías
Stack Tecnológico
Next.jsReactTypeScripttRPCPrismaPostgreSQLRedisTailwind CSSDockerZod
Características
- Listado completo de 1010+ Pokémon desde PokéAPI v2
- Filtros avanzados por tipo y generación con dropdown multi-select
- Buscador en vivo con coincidencias en nombre y cadena evolutiva
- Página de detalle con imagen, stats, tipos y navegación entre evoluciones
- Skeleton UI durante carga para mejor experiencia de usuario
- Caching dual en Redis (TTL configurable) + memoria para máximo rendimiento
Stack Técnico
| Capa | Tecnologías |
|---|---|
| Frontend | Next.js 15, React 19, Tailwind CSS 4, MerakiUI |
| Backend | tRPC v11, Prisma, PostgreSQL |
| Cache | Redis 7 + In-memory cache |
| DevOps | Docker Compose, pgAdmin |
| Validación | Zod, SuperJSON |
Arquitectura
Implementación del T3 Stack con type-safety end-to-end:
- tRPC para RPC type-safe cliente-servidor
- Prisma con extensión Redis para ORM y caching
- React Context para gestión de estado de filtros y búsqueda
- Persistencia de estado durante navegación SPA
Decisiones Técnicas
- Cache en memoria evita re-fetch de 1010 Pokémon en cada render
- Redis con TTL configurable para respuestas de PokeAPI
- Skeleton UI con patrón MerakiUI para carga perceptiva
- React Context elegido sobre soluciones externas por su simplicidad