Pocketpull — Web frontend

Vite + React 19 + TypeScript SPA for the Pocketpull collector experience (packs, vault, marketplace, rewards, profile). It talks to the API over HTTP with cookie-based sessions (credentials: "include").

Prerequisites

• Node.js 20+ (recommended)
• For real data: the API running (see the repo backend/ README) with WEB_ORIGIN matching this app’s URL (default http://localhost:5173)

Setup

cd frontend
cp .env.example .env
npm install

Edit .env as needed (see below).

Scripts

Command	Description
npm run dev	Dev server at http://localhost:5173
npm run build	Typecheck + production bundle to dist/
npm run preview	Serve dist/ locally for smoke tests

Environment variables

Defined in .env (see .env.example):

Variable	Purpose
VITE_API_URL	Base URL of the API (no trailing slash), e.g. http://localhost:8080. Used for all fetch calls.

Auth note: The browser must send cookies to the API. The API’s WEB_ORIGIN / CORS settings must allow your frontend origin, or login and /auth/me will fail.

Project layout

• src/pages/ — Route-level screens (home, packs, reveal, inventory, profile, etc.)
• src/components/ — Shared UI and layout (app-shell, nav, etc.)
• src/lib/api.ts — Central api() helper (fetch to VITE_API_URL with session cookies)
• src/providers/ — React Query, auth context
• src/shared/schemas.ts — Zod-derived types shared with API shapes where applicable

Routes (high level)

/, /how-it-works, /packs, /packs/:slug, /reveal/:slug, /slab-roll, /slab-roll/:machineId, /vault, /marketplace, /rewards, /leaderboard, /profile, /partners, /login

Unknown paths redirect to /.