Storefront Demo — Medusa Adapter
Internal capability demo
The same headless-commerce UI shell as the Shopify-adapter demo, rebuilt on a Medusa-shaped adapter instead — direct proof that only the data adapter changes when the commerce backend does, not the storefront.
The challenge
“Same architecture, only the adapter changes” is easy to write in capability copy and hard to actually prove — this demo exists to make that claim checkable by rebuilding the same storefront on a second, unrelated commerce backend.
“A visitor can’t tell which backend is running underneath by looking at the storefront — only the product data and the adapter code differ from the Shopify demo.”
The approach
- 01
Reused the identical Next.js 16 UI shell from the Shopify-adapter demo — the same catalog grid, PDP layout, and cart drawer components, unchanged.
- 02
Wrote a Medusa-shaped mock adapter in lib/commerce, matching Medusa’s data model instead of Shopify’s, so the swap is isolated to the data layer.
- 03
Carried over the same cache-tag revalidation pattern and optimistic-cart behavior, so both demos prove one architecture, not two that merely look similar.
- 04
Kept the two demos as separate, standalone repos rather than a shared package, so each reads as its own believable storefront rather than a shared internal harness.
Design iteration
The portability claim, proven rather than asserted
The Shopify and Medusa demos started from the same UI shell and diverged only inside lib/commerce — that comparison is the entire portability story. Both are local-only for now; deploying both publicly is the next step.
What we built
Highlights of the work
Same shell, different backend
Identical catalog, PDP, and cart components to the Shopify demo — only the adapter changed.
Live price/stock strip
The same “live · checked [time]” pattern, sourced from the Medusa-shaped adapter.
Optimistic cart
Instant add-to-cart UI, matching the Shopify demo’s behavior exactly.
Cache-tag revalidation demo
The same edit-and-see-it-live-in-seconds control, proven against a second backend shape.
Let’s talk
Have a project, or a product that could work harder?
Most projects begin with a short, no-pressure discovery call.