Back to projects

PokeCardIndex

Full-stack Pokemon TCG platform. Browse, search, and track over 20,000 cards across 172 sets with real-time market pricing, community sentiment features, and an interactive galaxy-style explorer called the Pokeverse.

React 18 TypeScript Supabase Vite 5 Tailwind CSS Zustand Framer Motion Recharts
20,122 Cards indexed
172 Sets cataloged
17 Series
Daily Database updates
7 Currencies supported

Everything was fragmented

Pokemon TCG collectors lacked a single platform that combined a complete card database, real-time pricing across multiple conditions and grading companies, personal collection tracking with finish-level granularity (holofoil, reverse holo, etc.), and community engagement.

Existing tools were fragmented: you'd check one site for prices, another for set lists, and a spreadsheet for your collection.

One platform that brings everything together

Built PokeCardIndex as a full-stack web application that combines card data, pricing, collection management, and community features into a single polished interface.

Card Database

20,000+ cards across 172 sets and 17 series, sourced from the Pokemon TCG API and mirrored in Supabase. Full metadata: HP, types, attacks, weaknesses, resistances, rarity. Updated daily.

Real-Time Market Pricing

Scrydex API integration for NM, LP, MP, HP, and Damaged conditions. Graded prices from PSA, CGC, BGS. Price history charts track value trends over time.

Multi-Currency Support

Prices in 7 currencies (USD, GBP, EUR, CAD, AUD, JPY, CHF) using live exchange rates. Auto-detected from user's country on signup.

Collection Tracking

Add cards with specific finishes (normal, holofoil, reverse holo). Track quantities, add entire sets at once. Grid, table, and binder view modes.

Community Sentiment

Like/dislike voting system with aggregated rankings surfacing the most and least liked cards across the community.

The Pokeverse

Interactive galaxy/timeline visualization for exploring sets and cards. Real-time presence via Supabase Realtime shows other users' cursors live.

Search & Filtering

Debounced search with structured queries (name:, set.name:, number:) and advanced filters for finding specific cards instantly.

Authentication

Supabase Auth with email, Google, and Discord OAuth. User profiles with preferences and collection data.

Built for scale and speed

Frontend React 18, TypeScript, Tailwind CSS
Build Tool Vite 5
State Zustand
Routing React Router v6
Database Supabase (PostgreSQL)
Auth Supabase Auth (Email, Google, Discord)
Pricing API Scrydex (proxied via Edge Function)
Card Data Pokemon TCG API (SDK)
Animations Framer Motion
Virtualization TanStack Virtual
Charts Recharts
Hosting Netlify

Under the hood

In-memory caching layer with stale-while-revalidate strategy (2-minute stale window, 10-minute expiry) and a revalidation queue to minimize redundant API calls.

Supabase Edge Function proxy to handle CORS restrictions when calling the Scrydex pricing API from the browser.

Real-time presence system using Supabase Realtime channels (broadcast + presence) for the Pokeverse multi-cursor experience.

SEO infrastructure including programmatic sitemap generation for 19,000+ pages, schema markup, canonical URLs, and internal linking, for a single-page React app.

90+ database migrations managing the evolving schema across card data, pricing, collections, voting, and user profiles.

Image optimization pipeline with WebP/PNG fallback support and Supabase storage integration for reliable card image delivery.

One-stop platform for Pokemon TCG collectors

PokeCardIndex serves as a comprehensive platform combining a complete card database of 20,000+ cards across 172 sets, live market pricing from multiple sources, personal collection management with finish-level detail, and community features, all within a polished, responsive interface with daily data updates and strong SEO coverage.

Have a similar challenge?

Let's discuss how VervoLabs can build something like this for your business.

Start a project