Faisal Khan

Custom Apparel E-Commerce Platform

Client
Custom Apparel & Print-on-Demand Retailer
Duration
Ongoing / Production
Built with
Next.js, React, MongoDB, Mongoose, NextAuth, Konva, OpenAI API, AWS S3, Sentry, PostHog
Custom apparel e-commerce platform landing page

A custom apparel e-commerce platform is an online store built for print-on-demand and made-to-order products, where the storefront, a browser-based design tool, and the production/fulfillment backend stay in sync in real time so a customer's design turns into a produced, shipped order without manual handling. This one is a large single-app Next.js platform built for a custom apparel retailer: a public storefront, an extensive admin backend, and a Konva-based creator tool customers use to build their own print designs before checkout, all running on one codebase.

Architecture

Single Next.js App Router application, server components fetching data and passing it down to client components per route, backed by two separate MongoDB clusters via Mongoose — one for core store data (products, orders, customers, ~78 models), one dedicated to the design/style data behind the creator tool. Role-based access (admin, partial admin, customer, user) is enforced centrally in Next.js middleware rather than duplicated per route.

Core capabilities

  • Design Creator Tool — a Konva-based canvas editor in the browser where customers build custom print designs, with OpenAI API-assisted design features to help generate or refine artwork
  • Storefront & Checkout — full product catalog, cart, and checkout flows, with PayPal, Google Pay, Apple Pay, Authorize.Net, and Afterpay all wired in as payment options
  • Admin Backend — a large internal admin surface (order management, product/design review, customer accounts) built around a shared modal-based CRUD pattern instead of separate create/edit pages per entity
  • Image Processing Pipeline — Sharp, Jimp, and canvas-based server-side processing to turn customer-submitted designs into production-ready print files, stored on AWS S3/Wasabi
  • Shipping & Fulfillment — integrations with FedEx, Endicia, and ShipStation for label generation and order fulfillment
  • Email Automation — transactional and marketing email across SendGrid, Mailchimp Transactional, Postmark, and Mandrill, templated with React Email
  • Google Ads Automation — automated campaign and feed management tying the product catalog directly into Google Ads, rather than manual campaign upkeep
  • Analytics & Monitoring — PostHog for product analytics, Google Tag Manager, and Sentry for error tracking across client, server, and edge

Engineering notes

  • 199 API routes, ~100 top-level component directories organized by domain (admin, checkout, creator, cart, emails), 82 utility modules, and 78 Mongoose models — a genuinely large single-app codebase, not a set of microservices
  • Zod schemas validate every form input; React Hook Form + Axios is the standard pattern across the app
  • Production build allocates an 8 GB Node heap given the app's size; deploys run through a scripted pipeline — git pull, build to a temp directory, swap in the new build, upload Sentry sourcemaps, restart the PM2 cluster, then purge the Fastly CDN

What does a custom apparel e-commerce platform need beyond a normal online store?

A real design tool, not just a product catalog. Customers need to build and preview their own print designs before ordering, which means a canvas editor (this platform uses Konva) tied directly into an image-processing pipeline that turns that design into a production-ready print file — a standard storefront has no equivalent step.

How does AI fit into a print-on-demand platform like this?

As design assistance inside the creator tool, not a customer-facing chatbot. The OpenAI API here helps customers generate or refine artwork while they're building a design in the canvas editor, so the AI is embedded in the actual product-creation workflow rather than bolted on as a separate feature.

Can Google Ads be automated directly from a product catalog?

Yes — by feeding live catalog and inventory data straight into campaign and feed management instead of updating ads by hand. This platform automates that sync, so ad campaigns stay current with what's actually in stock without a marketer manually editing feeds.

Screenshots