Loading, in progress

CASE STUDY · COMMERCE

E-Commerce Platform

A storefront and admin suite for an independent retailer: fast browsing up front, real inventory control behind it.

ROLE
Full-stack developer
TIMELINE
12 weeks
TEAM
2 people
PLATFORM
Storefront + admin
View code on GitHubLive demo coming soon

01 · OVERVIEW

Project overview

DEVELOPMENT TIME

12 weeks

Discovery to launch

TEAM SIZE

2 people

Me plus a brand designer

KEY ACHIEVEMENT

+41% conversion

Versus the old template store

THE PROBLEM

NORTH&CO sold through a template store that hid stock levels, broke on mobile checkout, and forced staff to update inventory in spreadsheets.

THE APPROACH

A custom React storefront with Stripe checkout, backed by a Node and PostgreSQL admin where staff manage products, stock and fulfilment in one place.

+41%

checkout conversion on mobile

1.2 s

median page load on 4G

0

overselling incidents since launch

02 · FEATURES

What it does

01

Stripe checkout

Saved carts, Apple Pay and Google Pay in a two-step checkout.

02

Order history

Customers track orders and reorder favourites in one tap.

03

Inventory control

Live stock across sizes and colours with low-stock alerts.

04

Role-based admin

Owners, staff and fulfilment each get the tools they need.

05

Product search

Instant search with filters for size, colour and price.

06

Secure auth

JWT auth with server-side session refresh.

03 · PROCESS

How it was built

  1. WEEK 1–2

    Discover

    Audited the old store funnel and interviewed staff about inventory pain.

    • Funnel audit
    • Requirements
  2. WEEK 3–4

    Design

    Storefront, product page and admin designed with the brand designer.

    • Figma prototype
    • Brand system
  3. WEEK 5–10

    Build

    React storefront, Node API, Postgres schema and Stripe integration.

    • Storefront
    • Admin suite
  4. WEEK 11–12

    Ship

    Data migration, load testing and a soft launch to newsletter subscribers.

    • Launch
    • Zero-downtime cutover

04 · TECH STACK

Built with

FRONTEND

  • React
  • TypeScript
  • Tailwind CSS

BACKEND

  • Node.js
  • Express
  • JWT

DATA

  • PostgreSQL
  • Prisma
  • Redis

PAYMENTS & CLOUD

  • Stripe
  • AWS S3
  • CloudFront

ARCHITECTURE

05 · LEARNINGS

Challenges & learnings

Overselling during drops

CHALLENGE

Limited releases sold more units than were actually in stock.

OUTCOME

Stock reservations held at checkout made overselling impossible.

Slow mobile checkout

CHALLENGE

Half of mobile shoppers abandoned at the payment step.

OUTCOME

Stripe Payment Element with wallets cut checkout to two steps.

Interested in this project?

Happy to walk through the code, the decisions behind it, or how something similar could work for your team.