Skip to main content
MBDev
All work

Cartothèque

A complete online store, from catalogue to checkout.

A concept project: a trading card store. A catalogue of nearly 200 products, instant search, combinable filters, a persistent cart, promo codes, a four-step checkout, preorders and collection buybacks.

The question this demonstration answers

“Have you ever built an online store?” A marketing site doesn't answer that question, and a store theme installed in an evening doesn't either: it proves you can pick a template, not that you can build commerce.

Cartothèque is a store built from scratch. The behaviour is real — search really searches, filters filter on the server, the cart survives a reload, and tax calculation follows the exact order a Quebec business needs. It's the commercial data that is fictional, and it says so.

Card retail was chosen because it is one of the most demanding cases in e-commerce: the same product exists in several conditions, several languages and several finishes, each with its own stock and its own price. A catalogue that handles that also handles a clothing store or a parts supplier.

What that means for a business

A customer who can't find a product doesn't buy it. Search answers as you type, tolerates accents and works from the keyboard; filters combine, show a result count per criterion and live in the URL — a link to filtered results can be shared as is and reloads identically.

The buying journey goes all the way: a persistent cart, promo codes that genuinely calculate with their minimum, shipping, free shipping judged after the discount, GST and QST kept separate, and a four-step checkout with validation and focus handling. No transaction is processed, and every screen says so before and after the click.

Two less common journeys round out the demonstration: preorders, with a release date and billing on shipment, and collection buybacks, which value a lot by card condition and offer cash or store credit. These are exactly the edge cases a template doesn't cover.

Real names, and no official imagery

The store names real games, real sets and real cards: a catalogue of imaginary universes would read like a template filled with sample text. Naming the products you sell is what every card shop does.

No official imagery is used, though — no artwork, no card scans, no product photography, no images taken from another retailer. I hold no permission to republish those visuals in portfolio work. The product boards were drawn for Cartothèque instead, and the site explains that itself.

This isn't a technical limitation: wiring a catalogue up to client-supplied photography is routine work, and it is what a real engagement would call for. It is a decision not to reproduce visuals I do not hold the rights to. Same rule for the data: a name, a number or a date that couldn't be verified is omitted rather than approximated.

Screenshots

The Cartothèque home page
The home page: the concept-project banner up top, then the shelves by game, new arrivals and preorders.
The catalogue filtered by game and product type
Filters: combinable, counted per criterion and written into the URL. Filtering happens on the server — the catalogue never travels to the browser.
A card's product page with its copies in stock
A card doesn't have “a” stock level: it has copies, each with its own condition, language, finish and price. That's what this table makes buyable.
The collection buyback tool
Buybacks: a commercial journey templates don't cover. The estimate follows card condition, and store credit is worth more than cash.
Cartothèque on a phone
On a phone: filters move into a thumb-friendly drawer, and the grid stays readable down to 320 px wide.

What's inside

  • A 197-product catalogue — sealed product, singles and supplies — across 45 sets
  • Instant search, accent-tolerant, fully keyboard navigable
  • Combinable filters reflected in the URL, with server-side filtering
  • Cards sold by copy: condition, language, finish, stock and price for each
  • Persistent cart, promo codes, GST and QST kept separate, four-step checkout
  • Dated preorders and a collection buyback tool
  • Bilingual, keyboard accessible, no overflow down to 320 px
  • No official imagery: all 197 product boards are drawn for the demonstration

Let's talk

Tell me about your project

A few minutes is all it takes. Even if the idea isn't clear yet — that's exactly the moment when one good question saves the most time.

  • Free, no obligation
  • Usually within 24 hours