← Back to work
Production

The Moment

A production e-commerce platform for an artisanal bakery, built as a multi-brand monorepo that powers three business sites from one codebase.

The Problem

A small artisanal bakery needed more than a Shopify store. They needed a system that could handle custom order windows, manage fulfillment through a visual dashboard, process both card and e-transfer payments, and maintain a product catalog through a CMS they could use without calling me every time. Infrastructure costs had to stay low.

Meanwhile, the same engineering team (me) was building sites for two other brands. Three separate codebases wasn't going to work. I needed shared infrastructure with distinct brand identities.

The Approach

I set up a Turborepo monorepo: all three brand sites, a shared component library, a design token system with per-brand CSS variables, and a Sanity CMS studio. Parallel build pipelines keep everything fast.

The e-commerce flow covers the full loop: product catalog in Sanity, shopping cart with real-time state, multi-step checkout, dual payments (Square for cards, Interac e-Transfer via email), and an admin dashboard with Kanban-style order management. The admin side updates live through Supabase subscriptions.

Architecture

hoodii-platform/
├── apps/
│   ├── themoment-site      Customer-facing e-commerce (port 3002)
│   ├── themoment-admin      Order management dashboard (port 3004)
│   ├── hoodii-site          Portfolio site (port 3001)
│   ├── brixel-site          Construction coordination (port 3003)
│   └── studio               Sanity CMS (port 3333)
├── packages/
│   ├── ui                   60+ shared React components
│   ├── tokens               Design system (per-brand CSS variables)
│   ├── motion               Animation primitives
│   ├── forms                Validated form components
│   ├── seo                  Metadata generators
│   └── env                  Type-safe environment validation
└── tests/
    ├── smoke/               Health checks across all systems
    ├── e2e/                 38 end-to-end customer + admin tests
    └── accessibility/       WCAG compliance checks

Key Decisions

Monorepo over microservices

Three brands sharing UI components, tokens, and build config. One PR can update a button across all sites. Turborepo handles caching and parallel builds. Full builds take under 2 minutes.

Supabase for real-time state

Orders, payments, and admin actions flow through PostgreSQL with Row-Level Security. The admin dashboard updates in real time through WebSocket subscriptions. No polling, no stale data.

Dual payment processing

Square SDK handles card payments. Interac e-Transfer (how most Canadian small businesses get paid) runs through automated email notifications with Nodemailer. Both feed into the same order status state machine.

Testing from day one

38 end-to-end tests covering the complete customer journey: browse → cart → checkout → payment → confirmation. Page Object Model pattern with 60+ reusable methods. Crash detection, stability holds, database verification, email queue checks.

What Shipped

6 apps

Running from a single monorepo

60+ components

Shared across all brands

38 E2E tests

Full customer + admin coverage

2 payment methods

Square + Interac e-Transfer

Real-time admin

Kanban board with live updates

Sub-2min builds

Turborepo cached pipeline

Tech Stack

Frontend

  • Next.js 14
  • React 18
  • TypeScript
  • Tailwind CSS
  • Framer Motion

CMS

  • Sanity.io
  • Portable Text
  • Image CDN

Backend

  • Supabase (PostgreSQL)
  • Row-Level Security
  • Real-time Subscriptions

Payments

  • Square SDK
  • Interac e-Transfer
  • Nodemailer

Testing

  • Playwright
  • Axe-core
  • Page Object Model
  • 38 E2E tests

Infrastructure

  • Turborepo
  • Vercel
  • PNPM Workspaces
  • Sentry
← All workNext: CareerOS →