Project Overview

PokeTracker is a dynamic, front-end web portal engineered to serve the Pokémon Trading Card Game (TCG) industry. The main problem solved was the lack of a reliable, centralized tool for users to manage their collections in the digital age. 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.

This project demonstrates my capacity to build a robust, data-rich user interface that delivers significant value.

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

This project was a fun application to build. I gained invaluable experience in:

Advanced State Management: Managing a complex application state and data flow without a backend.

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.

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.