Tokenised Pokémon card marketplace UI — buy Pokéballs, rip them open, vault graded cards, sell back instantly, list on the marketplace, or redeem for physical shipping.
This repo is a frontend prototype with a typed mock API layer (src/lib/api/*). No real auth, payments, or database yet. See docs/APPLICATION_OVERVIEW.md for architecture and what backend services are needed to go live.
- Next.js 16 (App Router) + React 19 + TypeScript
- Tailwind CSS 4
- Framer Motion (rip / reveals)
- Zustand (session + toasts)
- Node.js 20+ (recommended)
- npm 10+
npm install
npm run dev -- -p 3001Open http://localhost:3001.
| Command | Description |
|---|---|
npm run dev |
Dev server (default port 3000; use -p 3001 if preferred) |
npm run build |
Production build |
npm start |
Serve the production build |
npm run lint |
ESLint |
/lp/fire-lightning— campaign landing- Open a pack → Sign up (any email; DOB must be 18+)
- Checkout — use any card number not ending in
0000 - Rip → sell back or keep →
/collection→ list on marketplace
Session and vault state persist in the browser (sessionStorage / localStorage). Display currency defaults to USD; switch USD / GBP / EUR from the sidebar or top bar (stored as catcha-currency).
src/app/(shell)/ # Main app shell (sidebar + mobile tabs)
src/app/(bare)/ # Auth, rip, campaign LP (no sidebar)
src/components/ # CardSlab, packs, shell, share generator, …
src/lib/api/ # Typed data access (swap this for real backend)
src/lib/mock/ # Seed catalogue + localStorage DB
src/types/ # Domain models
public/cards/ # Local card art for the mock catalogue
docs/ # Application / backend overview
- Push this repo to GitHub.
- Import the project in Vercel (Framework Preset: Next.js).
- Leave env vars empty for the mock UI — none are required.
- Deploy. Build command:
npm run build· Output: Next.js defaults.
Or from the CLI once logged in:
npx vercel- 18+ only — signup validates date of birth.
- Card imagery under
public/cards/is for prototype use only (Pokémon Company IP). Licensed assets or a licensed API are required for a commercial launch. - Theme preference is stored client-side as
data-themeon<html>; when unset, colours followprefers-color-scheme.