An enterprise-grade Trading Card Game (TCG) marketplace and management ecosystem. This platform integrates a high-performance card catalog, a real-time listing engine, and professional deck management tools into a unified, type-safe architecture.
The TCG Marketplace is designed to solve the complexity of large-scale card hobbyist needs:
- Unified Catalog: A single source of truth for cards across multiple games (MTG, Pokémon, Yu-Gi-Oh!).
- Seller Command Center: Tools for bulk inventory management and market analytics.
- Content-First: integrated strategy guides and news via a modular CMS.
- Native Experience: Cross-platform availability through web and mobile companion apps.
The project is organized as a monorepo-style ecosystem:
/webstore: The flagship customer-facing marketplace. Built with Next.js 14, TanStack Query, and Framer Motion./serverside: The core business logic layer. Implements Next.js Server Actions and secure Supabase API routes./adminweb: Dedicated portal for marketplace administrators and content creators./mobileport: Cross-platform companion app built with React Native and Expo./db: Centralized SQL schema definitions, RLS policies, and PostgreSQL functions.
- Faceted Navigation: Real-time filtering by Game, Rarity, Price, and Type.
- URL-Synced State: Filters are persisted in the search parameters for deep linking.
- Resilient Catalog: Intelligent fallback to mock data ensures UI stability even during backend maintenance.
- Listing Aggregation: Automatic grouping of individual seller listings by unique card identifiers.
- Quick-Add Interface: High-speed inventory entry with Zod-validated pricing and condition logic.
- Bulk Import: Industry-standard syntax support (
[gameid]_[cardid]_[count]) via optimized Regex parsing. - Transaction Safety: Atomic PostgreSQL operations ensure deck integrity.
- Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS.
- State Management: TanStack Query (Server State), Zustand/Context (Cart & UI State).
- Backend/DB: Supabase (PostgreSQL), Row Level Security (RLS).
- Animations: Framer Motion & Lucide Icons.
- Validation: Zod (Schema Validation), React Hook Form.
- Node.js 18+
- Supabase Project (URL & Anon Key)
Configure your .env.local in webstore and serverside:
NEXT_PUBLIC_SUPABASE_URL=your_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
NEXT_PUBLIC_SERVERSIDE_API_URL=http://localhost:3000/api# Install dependencies
npm install
# Start webstore development
cd webstore
npm run dev- Architecture Deep-Dive: Detailed breakdown of the system design and data flow.
- Database Schema: Raw SQL definitions for the marketplace core.
Note
This platform is currently under active modernization. For architectural decisions or technical debt queries, please refer to the ARCHITECTURE.md guide.