VanDiex
We built VanDiex as a luxury architectural-materials e-commerce where the problem wasn't selling products but selling them to the right buyer: architects and interior designers don't buy from a generic product card, they buy on brand, finish and spec. So we built a custom Next.js storefront (47 routes, 23 modules, 265 files) with immersive per-brand showcase pages, and modeled the real business close with a full quote system — form, in-browser PDF and email — instead of forcing a cart. Behind it runs a two-brain architecture: MedusaJS for transactions and PayloadCMS (11 collections, a 6-tab product spec sheet, brand profiles and before/after case studies) for rich content, joined by a custom mapper, plus a supplier layer to feed the curated catalog. The proof: the storefront, the CMS and the data layer are already deployed to staging and production, with a CI/CD pipeline that rebuilds only the component you touch.
Category
E-Commerce
Stack
Next.js, TypeScript, PostgreSQL
Status
In development
The problem
Premium brands of faucets, door hardware and flooring (Phylrich, Emtek, Hansgrohe, Moretti) don't sell through a generic e-commerce card: architects and interior designers buy on technical spec, finish and brand prestige. A standard store template cheapens these products and loses the sale. On top of that, the catalog arrives from suppliers in their own formats, and the real close isn't an "add to cart" but a formal quote.
What we built
- —Custom Next.js / React storefront with 47 routes and 23 UI modules (265 files), region-based routing (mx/MXN by default) and a high-end, Apple-like minimalist aesthetic
- —Immersive brand showcase pages: cinematic hero, lightbox gallery, filtered catalog plus FAQ and services sections, built on a reusable template plus a per-brand dynamic route
- —Full quote-request system (~743 lines): validated modal form, in-browser PDF generation and an email service, backed by a quote endpoint on the server
- —Content CMS in PayloadCMS with 11 collections: Products with a 6-tab spec sheet (basics, specs, pricing, media, SEO, relations), Brands with rich profiles (certifications, awards, warranty, sustainability) and Case Studies with before/after
- —Supplier layer (Suppliers and SupplierProducts collections, ~560 lines) to ingest and map external supplier catalogs into the curated catalog model
- —Transactional MedusaJS backend (products, variants, pricing, cart, checkout, orders, regions) with a custom quote endpoint
- —End-to-end Stripe Elements checkout (addresses, shipping, payment, review, confirmation)
- —Token-based order transfer between users (accept/decline), an uncommon e-commerce mechanic
- —Dual data integration: Medusa for transactions and Payload for enriched content, with a client and mapper that translates Payload content into Medusa format
- —CI/CD with selective change detection (rebuild only the touched component), containers and staging/production deploys
Results
47 page routes and 23 UI modules (265 .ts/.tsx files) in the storefront
11 CMS collections; the Product spec sheet defines 6 tabs (Products.ts ≈496 lines)
Quote system of ~743 lines (modal, PDF generator, email service, API client)
E-commerce backend + CMS deployed to staging and production; storefront on staging (production pending)
CI/CD with per-component selective rebuild (storefront / Medusa / CMS) on multi-stage Docker