Portfolio • B2B/B2C • 10-30-25
PokeTracker
PokeTracker is a frontend-first collection intelligence platform built to explore how complex, data-rich systems can exist entirely on the client. It provides investors, traders, and collectors with real-time pricing, historical trends, and portfolio analytics by orchestrating multiple public APIs into a cohesive, durable interface.
Project Overview
PokeTracker was built as a frontend-only exploration into how a traditionally physical hobby could be translated into a modern, data-driven experience.
My solution was to build a secure "digital binder" that allows users to see the real-time value of their collection, track the historical metrics of entire card sets, and understand their collection’s breakdown. On top of this foundation, the application creates a dynamic ecosystem where users can simulate acting on that information as investors, traders, or vendors.
Challenges
The primary challenge was building a system to create this "digital binder" a central repository for a user's collection that is both intuitive to use and powered by dynamic data from an external source. This required a robust frontend architecture to: Make various asynchronous API calls to fetch card data, images, and pricing information. Efficiently manage the global state of a user's collection, metrics, and application wide data. Design and implement a highly dynamic UI that could present different views and data for different user roles (investor, trader, etc.) entirely on the client side.
This project was a deep dive into advanced frontend state management and API integration
Process
My process began with in depth Figma mockups for each user role. I designed distinct dashboards and key screens for the investor, trader, and vendor personas to make sure the UI was perfectly tailored to their needs. This design phase was crucial for visualizing how different data sets and features would be conditionally rendered for each user type, from a trader's marketplace view to an investor's long term value metrics.
For development, I chose a powerful frontend approach using React. I focused on building a modular, component-based architecture for the entire application. I used a modern state management library (e.g., Redux Toolkit or Context API) to handle the complex, real time data from the various API's and manage the state of the user’s collection, profile, and various dashboards. Frontend routing was implemented to create a seamless, single page application experience.
Tech Decisions
The decision to use React was crucial for building an application that required dynamic, role based functionality with the intent to build a custom backend in phase 2. React's component based nature allowed for the creation of a highly responsive front-end where the user experience could change entirely based on their assumed role. I leveraged JavaScript's asynchronous capabilities (async/await) to handle API calls efficiently, making sure the user experience remained smooth.
To manage the complex data, a dedicated state management system was implemented. This architecture demonstrated my ability to build a robust, scalable, and maintainable frontend application capable of handling a significant amount of data and business logic on the client side alone.
Key Takeaways
PokeTracker is a powerful example of my ability to solve real-world problems through frontend technology alone. It demonstrates my proficiency in a modern JavaScript framework and my strategic mindset in building a product that provides tailored value to different types of users and supports a connected ecosystem for an entire industry. This project was a fun application to build. I gained invaluable experience in:
- Advanced State Management Designing and managing a complex application state entirely on the client-side, with multiple interactive components, and real-time data updates.
- API Integration Consuming a third party API for all core data, including images, metrics, and pricing, and handling the parsing and presentation of that data.
- Front-End Architecture Building a scalable and modular front-end architecture that can be easily extended and maintained.
Quick Details
- Year 2025
- Industry Trading Card Game (TCG)
- Role UX Engineer
- Category B2B/B2C
- Platform Web
- Duration --
Technologies Used
Color Palette
Each color was selected to support accessibility, visual hierarchy, and a clean, modern interface.