The Debug Shop

20 January 2025

Overview

The Debug Shop is the storefront for The Debug Den, a small UK community run by two of us. It sells Discord perks such as Nitro and server boosts, and remote PC optimisation sessions, with software licences on the way. The goal was a shop that's quick, cheap to run and hard to break. So the site itself is just static pages: the catalogue is managed from my Discord bot's dashboard, and payments are handled entirely by a third-party checkout. Nothing on the site stores customer data, so there's nothing on it to steal.

Features

Live catalogue: products and categories load from Dark's dashboard API, so stock and prices can be changed from a browser without touching the site's code.
Category tabs with icons and descriptions, each fading in its own grid of product cards.
Stock badges (in stock, on hold, coming soon) and colour-coded tags.
Three ways to buy: a secure embedded checkout, an external purchase link, or opening a Discord ticket for custom orders.
Shop status banner (open, delayed, holiday, restocking, paused), set from the dashboard with a note and a "back on" date.
Live reviews pulled straight from the community's Discord reviews channel, with an average rating and a scrolling carousel.
FAQ, scroll-spy navigation, animated stats and reveal-on-scroll effects.

The Debug Shop's catalogue: a category rail on the left, the shop status banner, and product cards with prices, tags and stock badges

Live five-star reviews pulled from the Discord reviews channel, with reviewer names and avatars blurred

The Debug Shop on a phone, with the menu button, hero photo and intro text

How it's built

Front end: hand-written HTML, CSS and JavaScript with a little jQuery. No framework and no build step.
Catalogue and reviews: fetched at runtime from Dark's dashboard API, which only accepts requests from the shop's own address.
Checkout: a payment provider's embedded checkout, so card details never touch the site.
Product art: generated from an HTML template, screenshotted with a headless browser and converted to small WebP files, so every product image shares one consistent style.

Engineering highlights

Treating the catalogue as untrusted

The catalogue comes from another system, so the shop never trusts it blindly. Every element is built with textContent rather than injecting HTML, and each field is checked against a strict pattern before it's used:

JavaScript

function button(item) {
  if (item.button === "discord") return ticketLink();

  // only a numeric product ID goes to the embedded checkout
  if (item.button === "checkout" && /^\d+$/.test(item.product)) {
    return checkoutButton(item.product);
  }
  // external links must be https
  if (item.button === "checkout" && /^https:\/\//.test(item.product)) {
    return externalLink(item.product);
  }

  return disabled("Soon"); // anything unexpected is shown as unavailable
}

The same idea applies everywhere: icon names, colours, dates and badges are each validated against an allowlist, image URLs must be https, and star ratings are clamped to 1 to 5.

Failing gracefully

If the catalogue can't be loaded, the shop doesn't show an error or a broken page. It falls back to a friendly "restocking" message pointing people to Discord:

JavaScript

fetch(CATALOGUE_URL)
  .then((res) => (res.ok ? res.json() : Promise.reject(res.status)))
  .then(renderShop)
  .catch(() => showMessage("Shop's restocking, check the Discord."));

Performance, SEO and accessibility

Fast loading: responsive WebP images with explicit sizes (no layout shift), lazy-loaded product and review images, product art around 15 KB each, and long-lived caching for fonts and assets.
Security headers: framing blocked, content sniffing disabled, a strict referrer policy, and integrity checks on third-party scripts.
SEO and sharing: canonical URLs, Open Graph and Twitter cards with a custom preview image for every page.
Accessibility: keyboard-operable tabs and FAQ, proper ARIA states and labels, and reduced-motion support for animations.

Challenges

The main challenge was building a real shop with no backend of its own. Splitting the work three ways (static site for speed, Dark's dashboard for managing stock, a third-party checkout for payments) kept the site simple and secure, but it meant designing a clean contract between the three and making sure the shop copes gracefully whenever one part is unavailable.

Outcome

The shop has been live since early 2025, and in October 2026 I gave it a full redesign. Because stock, prices and the status banner are managed from Dark's dashboard, running the shop day to day never involves touching the code.