Collection Manager

One Piece Inventory

A full-stack card collection tracker for the One Piece TCG — manage your inventory, build decks, check completion status, and monitor market prices with real-time CardMarket scraping.

Collection Tracking

Every card cataloged with real-time sync across devices

Deck Builder

Build decks, check completion, find missing cards instantly

Price Watch

Live CardMarket scraping to track your collection value

Source Code Open App

Stack

Frontend

Next.js 16React 19shadcn/uiTailwind CSS 4

Backend

Firebase AuthCloud Firestore

Data

Cheerio (CardMarket scraping)react-window

The Story

One Piece Inventory is a web app for tracking your One Piece Trading Card Game collection. It connects to Firebase for real-time inventory management with multi-provider authentication (Google, Apple, Discord), lets you import and manage deck lists, and shows deck completion status with missing cards and tradeable extras.

The app scrapes CardMarket for live market prices, caches them in Firestore, and calculates your total collection value. Built with Next.js 16 App Router, React 19, TypeScript, and Firebase — deployed on Vercel. Uses react-window for virtualized rendering of large card collections.

What I Learned

→Firebase real-time listeners with persistent local caching

→Web scraping with Cheerio for CardMarket price data

→Deck building logic with ownership tracking and completion checks

→Virtualized rendering with react-window for large datasets