MTDex
A responsive, high-definition Pokédex application built with React, showcasing complex data integration and a focus on premium UI/UX "vibe."
Project Overview
MTDex is a comprehensive Pokémon encyclopedia built to showcase both technical execution and product vision. Going beyond a simple API wrapper, the application is designed with a premium, high-definition aesthetic and an intuitive user experience that makes exploring Pokémon data enjoyable and effortless.
As the sole developer and designer on this "vibe coding" project, I served as the Product Manager, UX Designer, and Frontend Developer. I focused on structuring complex data—like evolutionary chains, detailed stats, and expansive item/move databases—into a clean, accessible interface using React and Vite, all while ensuring the application maintained a polished, engaging "vibe."
Role
PM & Dev
Platform
Web App
Stack
React, Vite
Timeline
2026
Key Contributions
Product Management
Defined the project scope, prioritized features for the MVP, and managed the integration of extensive external data from the PokéAPI into a cohesive product.
UI/UX Design
Designed a responsive, modern interface with a focus on "vibe." Created custom HD assets, smooth transitions, and intuitive navigation patterns for complex datasets.
Frontend Development
Built a performant Single Page Application (SPA) using React and Vite, implementing dynamic routing, state management, and efficient API data fetching.
Information Architecture
Organized thousands of data points (moves, items, abilities, forms) into a logical hierarchy, making deep lore and stats easily discoverable.
Project Gallery
Development Process
Defining the MVP
Started by evaluating the massive dataset available via the PokéAPI. Defined a Minimum Viable Product that focused on core Pokémon discovery, ensuring high-quality visual representation and fluid navigation were prioritized from day one.
Establishing the Vibe
Created a comprehensive design system focusing on typography, color palettes tied to Pokémon types, and smooth micro-animations. The goal was an interface that felt lightweight but packed with information.
React & Vite Foundation
Bootstrapped the application, established the routing architecture, and built reusable UI components (cards, modals, badges) using modern React patterns and Tailwind CSS for rapid styling.
Taming the API
Developed robust data fetching and formatting utilities to handle the complex, deeply nested JSON responses from the PokéAPI, transforming raw data into user-friendly displays.
Beyond the Basics
Expanded the application to include detailed sub-pages for Items, Moves, Abilities, Natures, and evolutionary chains, ensuring every interactive element functioned flawlessly.
A Polished Application
The resulting MTDex app stands as a testament to effective "vibe coding" —where intentional design and solid engineering meet to create a delightful user experience.
Explore MTDex
Experience the application live or explore the codebase to see the technical implementation behind the "vibe."
Try MTDex