Gastrol — Gas Cylinder E-Commerce
An online store for gas cylinders with two distinct storefronts — one for individual customers, one for businesses — built on Next.js, Payload CMS, and a type-safe tRPC API.
Two audiences, one product, very different rules
Selling gas cylinders online means serving two very different buyers from the same catalog: individuals who want a simple checkout, and companies who order at scale with their own pricing, accounts, and ordering rules.
Placeholder: expand on the business constraints — B2B pricing tiers, account verification, delivery logistics, or local payment requirements.
One catalog, two storefronts, a type-safe seam
Both storefronts share a single Payload-managed catalog and a tRPC API, so products, stock, and orders live in one place. The retail and business experiences diverge only where they must — pricing, account rules, and checkout flow.
tRPC makes the client/server boundary fully type-safe end to end: the Next.js frontend calls procedures with the same types the backend defines, so a schema change surfaces as a compile error, not a runtime bug.
1// pricing resolves per storefront, server-side 2export const cart = router({ 3 add: procedure 4 .input(z.object({ sku: z.string(), qty: z.number() })) 5 .mutation(async ({ input, ctx }) => { 6 const price = ctx.storefront === 'business' 7 ? await contractPrice(ctx.account, input.sku) 8 : await retailPrice(input.sku); 9 return ctx.carts.add(ctx.cartId, input, price);10 }),11});Next.js storefronts over a Payload + Mongo core
Payload CMS manages products, content, and orders on top of MongoDB; a tRPC API exposes catalog, cart, and checkout to both Next.js storefronts. Non-technical staff manage the whole catalog from the Payload admin.
Two stores, one maintainable codebase
Both customer types order online from a single catalog without the codebase forking in two. Placeholder: add order volume, B2B account count, or conversion numbers.