Crate & Co.

(E-commerce Platform)

A custom storefront and checkout for a homeware brand, built to stay calm on launch day.

+27% conversion
0.9s LCP on mobile
0 oversold items

2025 · Next.js · Stripe · Node.js · PostgreSQL · Vercel

crateandco.app

Problem

(what hurt)

Every product launch crashed the old store, and stock counts drifted between the warehouse and the site. The team was refunding oversold orders by hand after every drop.

Project goal: A growing homeware brand had outgrown its template store. It needed a fast, custom storefront and a checkout it could trust when a new collection drops.

Architecture

(how it fits together)

Product pages are statically generated and revalidated on edit. Checkout runs on Stripe, and a signed webhook marks orders paid inside a Postgres transaction that also reserves stock. Emails and warehouse sync run from a queue.

Tech decisions: Next.js with incremental regeneration for product pages, Stripe Checkout and webhooks for payments, a Node order service with a job queue, and PostgreSQL as the single source of truth for stock.

Next.js
Stripe
Node.js
PostgreSQL
Vercel

(architecture)

app/api/webhooks/stripe/route.ts

export async function POST(req: Request) {
  const sig = req.headers.get("stripe-signature")!;
  const event = stripe.webhooks.constructEvent(
    await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET!
  );

  if (event.type === "checkout.session.completed") {
    const session = event.data.object;
    await db.order.update({
      where: { checkoutId: session.id },
      data: { status: "paid", paidAt: new Date() },
    });
    await queue.add("send-receipt", { orderId: session.metadata.orderId });
  }
  return new Response("ok");
}export async function POST(req: Request) {
  const sig = req.headers.get("stripe-signature")!;
  const event = stripe.webhooks.constructEvent(
    await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET!
  );

  if (event.type === "checkout.session.completed") {
    const session = event.data.object;
    await db.order.update({
      where: { checkoutId: session.id },
      data: { status: "paid", paidAt: new Date() },
    });
    await queue.add("send-receipt", { orderId: session.metadata.orderId });
  }
  return new Response("ok");
}export async function POST(req: Request) {
  const sig = req.headers.get("stripe-signature")!;
  const event = stripe.webhooks.constructEvent(
    await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET!
  );

  if (event.type === "checkout.session.completed") {
    const session = event.data.object;
    await db.order.update({
      where: { checkoutId: session.id },
      data: { status: "paid", paidAt: new Date() },
    });
    await queue.add("send-receipt", { orderId: session.metadata.orderId });
  }
  return new Response("ok");
}

Features

(what it does)

Stock you can trust
Reservations happen in the same transaction as payment confirmation, so two people can't buy the last lamp.
Instant product pages
Pages are pre-rendered and images served as AVIF, which brought mobile LCP under one second.
Editor-friendly
Merchandisers edit collections in a headless CMS and see changes live within seconds.

(in use)

ship it ✓

crateandco.app/settings

Challenges

(what was hard)

01Webhook ordering
Stripe events can arrive out of order. Idempotency keys and a small state machine made every handler safe to retry.
02Launch traffic
Load tests at 20× normal traffic shaped the caching strategy before the first real drop.

Results

+27% conversion
0.9s LCP on mobile
0 oversold items

Conversion rose 27%, launch days stopped being incidents, and the brand hasn't oversold a single item since going live.

(next project)RelayReal-time Chat ↗Get in touch

design & code by Shreya Pathak

Problem

Architecture

Features

Stock you can trust

Instant product pages

Editor-friendly

Challenges

01Webhook ordering

02Launch traffic

Results