Openfront Collectibles is a self-hostable shop for Pokémon trading cards: singles by condition, graded slabs, sealed product and pre-orders, a buylist for buying cards from customers, consignment, and market-price tracking with repricing rules. Every set is a full checklist, so collectors can see what the shop holds, what each card is worth, and keep a binder and want list of their own.

Documentation: docs.openship.org/docs/openfront/collectibles

Demo

Storefront	collectibles.openship.org
Dashboard	collectibles.openship.org/dashboard

The demo is "Eighth Street Cards", a fictional shop created by the dashboard's normal onboarding (Complete card shop). Its catalog is 19 real sets with real TCGplayer market prices; its slab certificates are labelled samples.

Product spec →

Learn more →

The Openfront Ecosystem

Every Openfront is open source and self-hostable. Try any of them on its live demo.

Product	For	Repository	Demo	Docs
Openfront E-commerce	Online store: catalog, checkout, orders, fulfillment	openfront	e-commerce.openship.org	Docs
Openfront Restaurant	Online ordering, POS and kitchen display	openfront-restaurant	restaurant.openship.org	Docs
Openfront Grocery	Grocery ordering, lots, expiry and pickup	openfront-grocery	grocery.openship.org	Docs
Openfront Gym	Memberships, classes, check-in and billing	openfront-gym	gym.openship.org	Docs
Openfront Hotel	Reservations, front desk, housekeeping, folios	openfront-hotel	hotel.openship.org	Docs
Openfront Rental	Short-term rental bookings and calendars	openfront-rental	rental.openship.org	Docs
Openfront Salon	Appointments, stylists and services	openfront-salon	salon.openship.org	Docs
Openfront Barbershop	Bookings, walk-ins and barbers	openfront-barbershop	barbershop.openship.org	Docs
Openfront Coffee Shop	Café ordering and counter POS	openfront-coffeeshop	coffee-shop.openship.org	Docs
Openfront Real Estate	Listings, showings and transactions	openfront-realestate	real-estate.openship.org	Docs
Openfront Dealership	Inventory, test drives, deals and service	openfront-dealership	dealership.openship.org	Docs
Openfront Vape	Age-gated retail with compliance controls	openfront-vape	vape.openship.org	Docs
Openfront Convenience	Convenience store POS and inventory	openfront-convenience	convenience.openship.org	Docs
Openfront Collectibles (this repository)	Pokémon card shop: singles, slabs, sealed, buylist	openfront-collectibles	collectibles.openship.org	Docs
Openfront Cannabis	Dispensary menu, packages and recalls	openfront-cannabis	cannabis.openship.org	Docs
Openfront Pharmacy	Prescriptions, inventory lots and pickup	openfront-pharmacy	pharmacy.openship.org	Docs
Openfront Med Spa	Treatments, consents and memberships	openfront-medspa	medspa.openship.org	Docs
Openfront Construction	Projects, bids, change orders and crews	openfront-construction	construction.openship.org	Docs
Openfront Law Firm	Matters, intake, time and billing	openfront-law-firm	law-firm.openship.org	Docs
Openfront Scheduling	Booking pages for appointment businesses	openfront-scheduling	scheduling.openship.org	Docs
Openfront Social	Creator community and posts	openfront-social	social.openship.org	Docs
Openfront Rideshare	Rides, drivers and dispatch	openfront-rideshare	rideshare.openship.org	Docs
Openfront Airline	Flights, booking and passenger operations	openfront-airline	airline.openship.org	Docs
Openfront Hospital	Appointments, patients and care teams	openfront-hospital	hospital.openship.org	Docs
Openfront Sportsbook	Markets, bets and results	openfront-sportsbook	sportsbook.openship.org	Docs
Openfront Financial	Accounts, portfolios and advisory	openfront-financial	financial.openship.org	Docs
Openfront Analytics	Privacy-friendly website analytics	analytics	analytics.openship.org	Docs
Openship	Order routing from sales channels to fulfillment	openship	os.openship.org	Docs
Marketplace	Shop across Openfront stores	marketplace	marketplace.openship.org	Docs

Core Features

Set checklists

Each Pokémon set is imported as its full printed checklist (card data and image URLs from the Pokémon TCG API's data, bundled in features/keystone/lib/pokemon/checklists). The storefront's set pages tick what the shop holds and show every card's latest TCGplayer market reading.

Singles, slabs and sealed

Singles are stocked per card × printing × language × condition (NM, LP, MP, HP, DMG), the way TCGplayer and BinderPOS model SKUs. Graded slabs (PSA, BGS, CGC) are single serialized items with their grade, label and certificate. Sealed product sits in its set; pre-orders carry a street date, an allocation and a per-customer limit enforced at the cart.

Market prices and repricing

Market readings are stored per card and printing. Market & Repricing refreshes today's TCGplayer prices from TCGCSV for every set, then previews and applies pricing rules (basis, percentage per condition, floor, rounding, a swing limit that sends big moves to review).

Buylist, trade-ins and consignment

The buylist pays a share of market in cash or store credit by condition, with a hotlist and stock caps. Collectors build a sell list on Sell to us; staff inspect and quote on the trade-in desk. Slabs can be taken in on consignment with a commission agreement.

Collector accounts

A binder (cards owned, condition, what was paid, market value and set completion) and a want list (worst acceptable condition, maximum price) that shows when the shop can fill a want.

Card UI

The storefront and platform pages share one card component slice, features/storefront/components/cards (card grid and tile, checklist sheet and row, card art and badges, rarity marks, condition run, filter bar, set and binder summaries, price history, graded slab, sealed box end). It is mobile-first and themes from CSS variables, so the dashboard and the storefront each supply their own palette.

Architecture

Technology Stack

• Frontend: Next.js 16 with App Router and React 19.
• Backend: KeystoneJS 6 with a GraphQL API.
• Database: PostgreSQL with Prisma ORM.
• Styling: Tailwind CSS 4 and shared shadcn/ui components.
• Authentication: Password-based user accounts and session-based access with role capabilities.

Application Structure

openfront-collectibles/
├── app/                    # Public pages, dashboard routes, and HTTP endpoints
├── features/
│   ├── keystone/           # Backend models, access rules, and GraphQL workflows
│   ├── platform/           # Operator workspaces and onboarding
│   ├── storefront/         # Public application components and screens
│   └── dashboard/          # Authentication and shared dashboard shell
└── components/             # Shared UI components

Data Models

The model registry and Prisma schema cover:

• Card sets, catalog cards (printings and sealed product), market prices and pricing rules.
• Categories, franchises, releases, specimens, identifiers, and media.
• Condition, grading, provenance, custody, and valuation observations.
• Inventory units, locations, movements, reservations, and listings.
• Auction, bid, offer, consignment, buylist, collector, binder, want list, and inherited commerce records.

Getting Started

Prerequisites

• Node.js 22, compatible with the package requirements and Next.js 16.
• A PostgreSQL database you can migrate.
• npm.

Setup

1. Clone and install dependencies:

   git clone https://github.com/openshiporg/openfront-collectibles.git
   cd openfront-collectibles
   npm install

2. Configure environment variables:

   cp .env.example .env

   Review the example configuration and replace its placeholders. Keep only the local settings you need; do not copy production-mode or infrastructure examples unchanged.

   DATABASE_URL=postgresql://user:password@host/database
   SESSION_SECRET=replace-with-a-new-private-random-secret

   Generate the session secret with openssl rand -hex 32; use the generated value, not the placeholder. Never commit .env.

   Review runtime configuration for additional application settings before building or deploying. Configure enabled integrations separately; the two values above are not a complete production configuration.

   Production also requires configured object storage. Set S3_BUCKET_NAME, S3_REGION, S3_ACCESS_KEY_ID, and S3_SECRET_ACCESS_KEY, and supply the S3-compatible endpoint described in the source. Review mail and application-specific security settings there as well.

3. Start development server:

   npm run dev

   The development script prepares the backend schema, applies checked-in migrations, and starts Next.js.

4. Access the application: Open the URL npm run dev prints, then use these paths:

   • Public application: /[countryCode]
   • Admin dashboard: /dashboard
   • GraphQL API: /api/graphql

5. Create your first admin user: Visit /dashboard/init on an empty database to create the initial administrator, then sign in to the dashboard.

6. Run application onboarding: Configure store and regional settings, then use specimen preparation and collectible catalog workspaces to review evidence and publish eligible listings. Do not treat sample listings as verified authenticity or active auctions.

Development Commands

• npm run dev - Prepare the backend schema, apply migrations, and start Next.js development.
• npm run build - Build the backend and Next.js for production; does not apply migrations.
• npm start - Start the production Next.js server.
• npm run migrate:gen - Prepare the schema and generate/apply development migrations.
• npm run migrate - Apply checked-in Prisma migrations.
• npm run lint - Run the repository's ESLint script.

Use a disposable development database for migration generation. Review the script before running it against any existing data.

Discovery & Evidence Integration

The collectible commands and public observation projection define the public handoff and evidence boundary. Existing payment or grading adapter directories do not establish a live collectibles transaction service.

Documentation

The backend models, registered business workflows, access rules, and application routes document the implementation in this repository.

Security & Permissions

Role-Based Access Control

• canAccessDashboard - Access dashboard.
• canManageProducts - Manage products.
• canManageInventory - Manage inventory.
• canReadOrders - Read orders.
• canManageOrders - Manage orders.

Security Features

• Session-based authentication for signed-in users.
• Backend list access and workflow authorization, rather than dashboard visibility alone.
• Administrative access uses explicit role permissions. Machine credentials require credential scope as well as current owner-role authority; public discovery uses a separate projected listing surface.

Review the access implementation and individual workflow checks before extending permissions.

Platform Components

Admin Platform (/dashboard)

• Collectible Commerce: /dashboard/platform/collectible-commerce.
• Gift Cards: /dashboard/platform/gift-cards.
• Regions: /dashboard/platform/regions.
• Currencies: /dashboard/platform/currencies.
• Collectors: /dashboard/platform/collectors.
• Products: /dashboard/platform/products.
• Product Categories: /dashboard/platform/product-categories.
• Evidence: /dashboard/platform/evidence.
• Price Lists: /dashboard/platform/price-lists.
• Invoices: /dashboard/platform/invoices.
• Catalog: /dashboard/platform/catalog.
• Discounts: /dashboard/platform/discounts.

Storefront Experience

Country-scoped storefront pages expose catalog browsing and collectible handoffs at /[countryCode]/collectibles/handoff/[listingId]. Public observation projections preserve evidence sources and review states rather than presenting provenance or grading as a software guarantee.

Separate catalog definitions from individual specimens, identifiers, custody, inventory units, locations, condition observations, and media.

Deployment

Production Deployment

The Vercel button imports this application's own repository. Provision PostgreSQL and configure the application's complete runtime requirements, storage, mail, and enabled providers before building. Importing the source does not configure these services.

Build the application and apply checked-in migrations as a release step before starting the server. Back up existing data before migration.

npm run build
npm run migrate
npm start

The included Railway configuration defines this app's build and startup lifecycle. Provision services and secrets separately.

Scaling Considerations

Keep the shared PostgreSQL database, session secrets, and configured object storage consistent across application processes. Review background delivery and integration requirements before choosing a serverless runtime; a source import does not supply persistent workers.

Contributing

Use the development commands above when preparing changes. Keep model changes and their migrations together, and describe workflow and permission changes in pull requests.

License

This project is licensed under the MIT License. See LICENSE.

Support

• Documentation: Source models and workflows.
• Issues: Report bugs and feature requests.
• Product: Learn more about Openfront Collectibles.

---

Built with Next.js and KeystoneJS.