A nostalgic Game Boy-inspired web app featuring all 1,025+ Pokémon with battle mechanics, daily challenges, and authentic pixel-art styling.
The Spark
While exploring public APIs to test Figma Make's capabilities, I discovered the PokéAPI—a comprehensive database of every Pokémon ever created. As a lifelong Pokémon fan, I saw an opportunity to merge childhood nostalgia with modern design, creating something that went far beyond a simple API test.
What started as curiosity evolved into a full passion project.
What it does
Searchable Pokédex – Browse all 1,025+ Pokémon across 9 generations with real-time search and generation filters
Battle Simulator – Face Pokémon in authentic turn-based battles with type effectiveness, critical hits, move accuracy, and HP management
Quiz Game – "Who's That Pokémon?" silhouette challenge with streak tracking and shareable achievement screens
Favourites System – Save your favourites with custom Pokéball icons that change state (grey → red top when favourited)
Design Decisions
Visual Language
Created a strict monochrome Game Boy aesthetic to capture 90s handheld gaming nostalgia. Every Pokémon sprite uses a multiply blend effect for authentic black-and-white rendering, while maintaining readability and hierarchy.
Mobile-First Approach
Removed all decorative UI framing on mobile to maximise screen real estate. Navigation uses custom Pokéball icons that provide clear visual state (active = black with red top, inactive = grey without red).
Information Architecture
Organised 1,000+ entries through smart filtering (generation tabs), lazy loading (60 at a time), and instant search. Users can access detailed information without feeling overwhelmed.
Personality Through Details
- Pokémon cries play when they faint in battle
- Messages like "It's super effective!" for type advantages
- Colour-coded HP bars (green → yellow → red)
- Achievement unlocks with gradient celebration screens
- Editorial layout for quiz results vs. generic grids
- Messages like "It's super effective!" for type advantages
- Colour-coded HP bars (green → yellow → red)
- Achievement unlocks with gradient celebration screens
- Editorial layout for quiz results vs. generic grids
Working with AI
My Process with Figma Make
Rather than requesting everything upfront, I built the app layer by layer:
Foundation – Pokédex grid with search functionality
Depth – Detail pages with stats and evolutions
Engagement – Battle system with basic mechanics
Polish – Enhanced mechanics (critical hits, type advantages)
Delight – Mini-games and achievements
Depth – Detail pages with stats and evolutions
Engagement – Battle system with basic mechanics
Polish – Enhanced mechanics (critical hits, type advantages)
Delight – Mini-games and achievements
Effective Prompting
✅ Clear visual references and examples
✅ Specific design constraints (B&W theme, mobile-first)
✅ Iterative refinement ("make sprites larger on desktop")
✅ Authentic details ("use Pokémon battle messages")
Key Insight
AI works best when you know what you want but not necessarily how to build it. My familiarity with Pokémon games meant I could articulate specific mechanics (STAB bonuses, priority moves) while letting the AI handle implementation.
The outcome
A fully functional Pokédex that feels like playing a Game Boy game in your browser. The project demonstrates:
API Integration – Real-time data from PokéAPI for all content
System Design – Complex battle mechanics simplified into "Play Turn" button
Responsive UX – Seamless mobile-to-desktop experience
Brand Consistency – Every detail reinforces the retro gaming aesthetic
Emotional Design – Small details (cries, messages, achievements) create delight
What I learned
Passion fuels better work. Starting from genuine interest in Pokémon kept me engaged through complex features like battle calculations and evolution chains.
Constraints inspire creativity. The strict black-and-white palette forced thoughtful decisions about hierarchy, contrast, and state changes.
Build incrementally. Each feature built on the last, allowing for testing and refinement rather than overwhelming complexity.
Details make it memorable. Authentic touches like "A critical hit!" messages and Pokémon cries transformed a functional app into an experience.
Try it
