How it works

A clear overview of what this project does, how users should use it, and the technology stack behind it.

Project goal

PokeVault is a portfolio-style Pokemon card tracker. It helps users discover cards, add them to holdings, and monitor value, returns, and allocation in a modern dashboard experience.

Tech stack

A modular Next.js app with shared UI primitives and typed value logic, powered by the TCGdex API and Prisma.

Frontend

Next.js (App Router)ReactTypeScriptTailwind CSS

Backend and data

Next.js API RoutesPrisma ORMPostgreSQL/SQLiteTCGdex API

Architecture

Reusable page primitivesTyped DTO mappingShared valuation logicComposable UI components

Developer workflow

ESLintModular component structureProgressive refactoringAccessible UI patterns

User flow

Step 1

Search cards fast

Use the global search bar to find cards by name or number (for example 60/64 or 4/102). Results are pulled from the TCG database and normalized for consistent matching.

Step 2

Track each holding

Add cards to your portfolio with grade, finish, edition, quantity, and purchase price. Each entry is stored as a holding so the app can track value and return over time.

Step 3

Review performance

The dashboard and portfolio views summarize total value, profit/loss, allocation, and movers. This helps you quickly understand where your collection is growing or lagging.