# Third Shot Supply Co.: one Magento 2.4.9 catalog, two live storefronts

Case study · Live Magento 2 demos

A working Magento 2.4.9 store you can click through today, with two front ends on one catalog: a custom Luma theme and a headless Next.js storefront. A demo, so no real orders.

- Role: Independent Adobe Commerce & Shopify Consultant
- Where: Self-employed, Dec 2025 - present
- Stack: Magento Open Source 2.4.9 (Mage-OS 3.5), PHP 8.3, MariaDB 10.11, OpenSearch 2.19, Redis full-page cache, Luma child theme, Custom modules, Next.js 16 headless storefront, Magento GraphQL, TypeScript, Cloudflare

## Context

Most of my Magento work lives behind client logins and NDAs. Third Shot Supply Co. is a fictional pickleball gear brand I put on my own domain so anyone can see the kind of Magento 2 build I lead, end to end, without a login. The same store runs two front ends side by side: the classic Magento theme at [m2.michael-kuhlman.com](https://m2.michael-kuhlman.com) and a headless one at [headless.michael-kuhlman.com](https://headless.michael-kuhlman.com).

## The challenge

Make it a real store, not a theme screenshot: a current Magento release in production mode, a catalog that uses every product type, a checkout that completes, and a front end that is fast and comfortable on a phone. Then build a headless front end on the same catalog, so the two approaches can be compared on the same products.

## What I did

I built it with Claude Code as an example of AI-accelerated delivery: I designed the theme, the custom modules and the data model, used Claude Code to write the code faster, and reviewed every change and checked it in a browser before it went live.

- **Platform.** Magento Open Source 2.4.9 (the Mage-OS 3.5 distribution) on PHP 8.3, MariaDB 10.11, OpenSearch 2.19 and Redis full-page cache, in production mode.
- **Theme.** A custom Luma child theme: header and navigation, category pages with layered navigation, product pages with swatches, cart and checkout, all checked from phone to desktop widths.
- **Catalog as code.** A seeder module builds the whole catalog from source files: simple, configurable (color and grip-size swatches), bundle and grouped products, related and cross-sell links, reviews and CMS pages, so the store can be rebuilt from scratch in one command.
- **Shopping UX.** A custom module adds AJAX layered navigation, infinite scroll and live search.
- **Performance.** A custom module serves responsive WebP images and critical CSS so the first screen paints fast on mobile.
- **Headless storefront.** A second front end in Next.js 16 (App Router, TypeScript) that reads the same catalog through Magento's GraphQL API: same products, same URLs, cart, checkout and customer accounts. Pages are prerendered and served from Cloudflare's edge; a small Magento module tells the storefront to refresh a page when a product, category or CMS page is saved.
- **Git discipline.** Every change is a Git commit in a private repository, with pre-commit checks for secrets, PHP syntax and Magento XML.

## Outcome

Both storefronts are live and open to anyone: browse the catalog, filter, search and place a test order with the "Check / Money order" method (nothing ships, nothing is charged). Open the same product on each to compare a classic Magento theme with a headless build.

---
Canonical: https://www.michael-kuhlman.com/work/magento-demo-store