Live in production — wave3collectiveph.com

Wave3 CollectivePH

A complete custom business platform for a Philippine streetwear brand — premium storefront, fully custom CMS, real-time inventory, and payment operations. No Shopify. No WordPress. No templates. Built from scratch, end to end, by one engineer.

Role
Full Stack Engineer — everything
Type
Custom E-commerce + CMS
Status
V2 live · V1 sold out

01 — Overview

Not a website.
An operating system for a brand.

Wave3 Collective PH wanted a premium streetwear experience — not another generic template store. The goal was never just selling shirts: it was a platform that tells the brand's story while giving the owner complete business control without touching code. Version 1 sold out its first batch. This case study covers Version 2.

100%
Custom code — zero templates
1
Engineer, end to end
Sold out
First production drop
0
Developer needed to operate it

02 — Business Impact

Features are cheap.
Here's why these matter.

Custom CMSTotal independence
The client manages products, pricing, inventory, images, and every page of content herself — no developer involvement, no monthly platform fees, no waiting on anyone.
Real-time inventoryNo overselling
Stock is reserved the instant an order is placed and released automatically if payment lapses. Race conditions are handled at the database-transaction level — two customers can't buy the last shirt.
Manual payment workflowLaunch before the paperwork
Receipt-upload verification let the business start selling before having a registered business account — with a clear, designed-in path to automated payment gateways later. The business launched months earlier because of this decision.
Docs + video + live trainingConfident handover
A PDF operations manual, Loom walkthroughs, and a live training session meant the owner operated the platform independently from day one — support requests dropped to near zero.

03 — The Storefront

A premium buying experience

Every pixel custom-built to the brand: an editorial homepage, a real multi-item cart, live currency conversion, and an order flow designed around how Filipino customers actually pay.

Premium custom homepage Product catalog + detail pages Multi-item shopping cart Checkout with order confirmation Payment receipt upload Order tracking by code Live inventory per size Stock reservation + payment countdown Multi-currency display (PHP / USD / USDT) Live FX conversion Per-order shipping fees Brand story blog Interactive photo storytelling Community & contact channels Product search Fully responsive
FLOW

Shopee-style reservations

Stock reserves at order time, a payment window counts down, and unpaid orders auto-expire and restock — matching the buying behavior customers already know from major PH marketplaces.

TRUST

Verified receipts

Customers upload proof of payment; the owner verifies and approves in one click. Every paid order generates a shareable receipt page with courier tracking.

04 — The Custom CMS

This is not WordPress.

A fully custom content-and-operations system, purpose-built for this business. Every screen below was designed and coded from zero — the owner runs the entire company through it without ever seeing a line of code.

01

Dashboard

Orders to verify, pending payments, stock remaining, income, expenses, and net profit — the whole business at a glance.

02

Product management

Add, edit, hide, or permanently delete products. Upload photos, set prices, manage sizes and measurements — live on the store instantly.

03

Inventory control

Per-size stock counts with low-stock alerts. Reservations and releases happen automatically as orders move through their lifecycle.

04

Order operations

Verify payments, set shipping fees, add tracking numbers, cancel or reverse orders — with stock and bookkeeping corrected automatically at every step.

05

Money & reporting

Automatic income and shipping-expense logging on every sale, date-range reports, and one-click Excel/CSV exports.

06

Content studio

Rich-text blog editor (fonts, colors, links, images), hero image upload, featured-product curation, homepage photo stories, payment channels with QR codes, contact links, and password management.

05 — Under the Hood

The engineering that makes it a platform

Decisions a template can't make for you.

Concurrency

Race-condition-safe inventory

Stock decrements run inside database transactions at reservation time. Verified by simulating two simultaneous buyers competing for the last unit — exactly one wins, every time. When an admin updates stock, customers see it immediately.

Architecture

Built for ephemeral infrastructure

All media — payment receipts, QR codes, product photos, blog images — is stored in the database rather than on disk, because the hosting tier's filesystem doesn't persist between deploys. The app survives every redeploy with zero data loss, at zero infrastructure cost.

Data integrity

Self-healing bookkeeping

Every paid order automatically logs its sale as income and its exact shipping cost as an expense. When this feature shipped after real orders already existed, an idempotent boot-time backfill repaired historical records safely — no manual data fixes, no double entries.

Async migration

Sync to distributed SQLite

The entire data layer was migrated from local synchronous SQLite to Turso's async distributed SQLite to go cloud-native — every query path rewritten, verified end to end, with zero frontend changes required.

Dynamic content

Everything is editable

Hero image, featured products, badges, coming-soon cards, brand story, photo stories, payment channels, contact links — all live-editable through the CMS with server-side sanitization on rich content. No developer required, ever.

Input hardening

Defense at both ends

Every money field and user input is validated client-side and server-side — a malformed shipping fee can't silently become free shipping, and rich text can't smuggle scripts.

06 — UI Showcase

Designed to feel like the brand

Black. White. Royal blue. Big typography, editorial layouts, and interactions with intent.

Mobile — fully responsive

Mobile homepage
Mobile store page
Mobile cart and checkout

07 — Process

From research to launch

A structured, agency-grade process — run by one person.

Research

Brand positioning, PH customer payment behavior, marketplace UX patterns.

Planning

Feature scoping, data model design, zero-cost infrastructure strategy.

UI Development

Custom design system — typography, color, components, responsive layouts.

Backend Development

REST API, order lifecycle, inventory transactions, bookkeeping engine.

CMS Development

Dashboard, product/inventory/order management, rich content editing.

Testing

End-to-end flows, race-condition simulation, mobile audits, production smoke tests.

Deployment

Render hosting, Turso cloud database, environment configuration, CI on push.

Documentation

PDF operations manual and admin SOP, written for a non-technical operator.

Training

Loom video tutorials plus a live demo and hands-on training session.

Launch

Custom domain via GoDaddy DNS, SSL, go-live — and a sold-out first drop.

08 — Challenges

The hard parts

CMS

Building a CMS from zero

Designing an editing experience simple enough for a non-technical owner but powerful enough to run a real business — every affordance had to be invented, not installed.

DATA

Database architecture

Modeling orders, variants, reservations, media, and money movements so that every state change keeps stock and books consistent — including cancellations and reversals.

SYNC

Dynamic inventory

Keeping what customers see truthful under concurrency: reservations, expiries, restocks, and admin edits all mutating the same counts safely.

STATE

State management, no framework

Cart, currency, order lifecycle and UI state handled in disciplined vanilla JavaScript — proving the fundamentals without hiding behind a framework.

MOBILE

Responsive everything

Editorial desktop layouts that collapse into genuinely usable mobile experiences — including rethinking interactions (like the photo strip) rather than just shrinking them.

PROD

Real production constraints

Free-tier hosting with an ephemeral filesystem, cold starts, DNS migration from a locked registrar config, and testing against a live business that was actively selling.

09 — Deliverables

What the client received

Full-stack production website
Fully custom CMS
Cloud database (Turso)
Deployment & hosting setup
Custom domain configuration
PDF operations manual
Loom video tutorials
Live demo session
Hands-on admin training
Ongoing technical support

10 — Results

Shipped. Live. Selling.

V1

First drop sold out

The initial product batch sold out in the first production release — real customers, real payments, real fulfillment.

OPS

Business runs itself

The owner operates products, orders, content, and money reporting entirely through the CMS. No developer in the loop.

V2

Platform, not project

Version 2 shipped with a redesigned brand experience, richer CMS, and an architecture ready for payments, accounts, and automation.

11 — Roadmap

Architected for what's next

The platform was designed so each of these drops in without a rewrite — the API-first structure, clean data model, and CMS foundation are already in place.

Payment gateway (PayMongo) — automated verification Customer accounts Email notifications & receipts Email marketing / Klaviyo integration Discount codes Loyalty & rewards program Analytics dashboard AI automation Third-party API integrations

12 — Lessons Learned

What this project made me

Systems thinking

A feature is never just UI — it's data model, state transitions, failure modes, and the bookkeeping consequences of each. I learned to design the whole system before writing the first line.

Business first

The most valuable decisions weren't technical. Launching with manual payment verification instead of waiting for a payment gateway put the business in market months earlier.

Production humility

Deploying to real infrastructure with a live business taught me things tutorials never could: ephemeral disks, DNS propagation, cold starts, migration under load.

Designing for non-engineers

The CMS forced me to think like a UX designer: every workflow had to be obvious to someone who has never seen a database.

Communication is a feature

Documentation, video walkthroughs, and training turned a codebase into a business tool the client actually trusts and uses daily.

Scalability as a habit

Async data layer, API-first routes, additive migrations, idempotent repairs — building patterns that let the platform grow without rewrites.