WeBuildCrew
🛒 E-commerce · Fashion

LuxeCart — Headless E-commerce Store

A headless e-commerce store with a custom Next.js storefront, secure Stripe checkout and a fast admin — engineered for speed, SEO and conversion.

Timeline
6 weeks
Role
Full-stack design & development
Team
Engineer + designer
Year
2025
Next.jsTypeScriptStripePostgreSQLPrismaTailwind CSSCloudinary
🛒
LuxeCart

+38%

Conversion rate

0.9s

LCP

100

Lighthouse SEO

−55%

Page weight

Client goals

  • Make the storefront extremely fast
  • Rank well and convert more visitors
  • Give the team an easy admin to manage catalog

Project overview

LuxeCart is a headless store: a custom Next.js storefront on a fast commerce backend. The goal was speed, SEO and conversion that template stores couldn't deliver.

The client problem

Our solution

We built a custom storefront with server rendering and image optimisation, wired secure Stripe checkout, and gave the team a clean admin — cutting page weight by more than half.

What we built

Features

🛍️

Custom storefront

Fast, SEO-friendly product & category pages.

💳

Stripe checkout

Secure hosted checkout with wallets.

🧺

Cart & wishlist

Persistent cart and saved items.

📦

Order management

Admin orders, fulfilment and refunds.

🏷️

Discounts & promos

Codes, sales and campaign pricing.

🖼️

Media pipeline

Optimised images via Cloudinary.

Under the hood

Technical code

app/api/checkout/route.ts
TypeScript
import Stripe from "stripe";const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function POST(req: Request) {  const { priceId, orgId } = await req.json();  const session = await stripe.checkout.sessions.create({    mode: "subscription",    line_items: [{ price: priceId, quantity: 1 }],    metadata: { orgId, priceId },    success_url: process.env.BASE_URL + "/billing?ok=1",    cancel_url: process.env.BASE_URL + "/pricing",  });  return Response.json({ url: session.url });}
app/api/stripe/webhook/route.ts
TypeScript
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 s = event.data.object as Stripe.Checkout.Session;    await db.organization.update({      where: { id: s.metadata!.orgId },      data: { plan: s.metadata!.priceId, status: "active" },    });  }  return Response.json({ received: true });}

Integrations

APIs & services

Stripe

Checkout, payments and refunds.

Cloudinary

Image optimisation and delivery.

Resend

Order confirmation emails.

Algolia

Instant product search.

Process

Development workflow

  1. 1

    Discovery

    Goals, users and success metrics defined on a free call.

  2. 2

    Planning

    Fixed scope, milestone plan and timeline in writing.

  3. 3

    UI/UX design

    Wireframes and a clean, modern design system.

  4. 4

    Backend setup

    Database schema, auth and core services.

  5. 5

    API development

    Typed, documented endpoints and integrations.

  6. 6

    Frontend

    Responsive, accessible UI wired to the API.

  7. 7

    Testing

    QA across devices plus performance & security checks.

  8. 8

    Deployment

    CI/CD, monitoring and a smooth production launch.

  9. 9

    Support

    Ongoing maintenance, updates and new features.

Speed & SEO

Performance & SEO

Performance

  • Server-side & static rendering for instant first paint
  • Image optimisation and lazy loading
  • Code-splitting and route-level prefetching
  • Edge/CDN caching with smart revalidation
  • Green Core Web Vitals (LCP, CLS, INP)
  • Database indexing and query tuning

SEO

  • Per-page metadata, canonical URLs and Open Graph
  • Structured data (JSON-LD) for rich results
  • Programmatic sitemap & robots
  • Semantic, accessible HTML
  • Clean, descriptive slug URLs

Built secure

Security

🔒Session-based auth with role permissions
🔒Server-side authorization on every protected route
🔒Input validation (Zod) on client and server
🔒Secure payments via hosted Checkout (no card data stored)
🔒Rate limiting and abuse protection
🔒Encrypted secrets and least-privilege access

Outcome

Results & impact

+38%

Conversion rate

0.9s

LCP

100

Lighthouse SEO

−55%

Page weight

LuxeCart shipped a 0.9s-LCP storefront with a perfect Lighthouse SEO score, lifting conversion by 38% while halving page weight.