COMPLETED
Pokédex Next
Interactive Pokédex built with Next.js 15, TypeScript and T3 Stack. Consumes PokéAPI v2 in real-time with listings, type/generation filters, predictive search, detail with evolutions and stats. Optimized with in-memory and Redis caching.
Next.js · React · TypeScript · tRPC · Prisma · PostgreSQL · Redis · Tailwind CSS · Docker · Zod
Features
- Complete listing of 1010+ Pokémon from PokéAPI v2
- Advanced filters by type and generation with multi-select dropdown
- Live search with matches in name and evolution chain
- Detail page with image, stats, types and evolution navigation
- Skeleton UI during loading for better user experience
- Dual caching in Redis (configurable TTL) + memory for maximum performance
Tech Stack
| Layer | Technologies |
|---|---|
| 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 |
| Validation | Zod, SuperJSON |
Architecture
T3 Stack implementation with end-to-end type-safety:
- tRPC for type-safe client-server RPC
- Prisma with Redis extension for ORM and caching
- React Context for filter and search state management
- State persistence during SPA navigation
Technical Decisions
- In-memory cache avoids re-fetching 1010 Pokémon on each render
- Redis with configurable TTL for PokeAPI responses
- Skeleton UI with MerakiUI pattern for perceptive loading
- React Context chosen over external solutions for simplicity