Pokémon Card Collection Tracker
Designed and built a visual collection tracker for Pokémon card collectors, featuring real-time ownership tracking, variant management, and PIN-based authentication.
- Client
- Personal Project
- Role
- Product Designer, Developer
- Years
- 2026
Challenge
I went to a card show with my sister one time and saw her having to scroll though numerous lines of Pokemon names just to find the Pokemon she was looking for. She had completely forgotten that there was a search option and, even then, she had to click the button multiple times as it very small (probably around 15px). She didn't say outright that she was struggling, but after a while she mentioned that it would be nice if there was an easier way to find the Pokemon "by photos" because she couldn't remember their names sometimes.
Me: So what if you accidentally close the tab, is the collection still saved on the site?
Her: Huh. Good question.
Me, in my head: Good opportunity.
Action
I built Pokémon card collection tracker that focuses on ease of searching through visual cues and filters, and that also provides users with an option to save their collection data so that they can view their collection from whichever device they're using.
Key decisions that I made as I kept iterating on the app were:
- PIN-based access — No email signup or OAuth — I had tried that for a previous project and ended up with a headache. Instead, I kept the login method simple with a simple username and PIN combination. Secure yet frictionless.
- Visual-first browsing — Cards displayed as a grid with images, not a text list. You see the art, which is how collectors like my sister actually enjoy viewing their collection.
- Instant feedback — Tap a card and it's marked instantly. Tap it again and it's unmarked and untagged as something that you already own. No need for a confirmation modal or additional friction points. The state syncs immediately.
- Different modes for different types of collectors — Toggle between a casual type of tracking (one card per specie) and a hardcore type of tracking (gotta catch 'em call — literally). The hardcore mode offers multiple variant tracking (holo, reverse holo, full art).
Tech & Design Stack
React + TypeScript, Vite, Firebase (Firestore + Anonymous Auth), Supabase, Vercel deployment.
