Human Nature - Herbal E-Commerce Platform
Full-stack storefront + admin for a TCM supplement brand
Top outcome
Live in production at shophumannature.com - storefront, subscriptions, and admin end to end.
Stack
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4
Overview
A production e-commerce platform for Human Nature, a premium herbal supplement brand rooted in Traditional Chinese Medicine. Live at shophumannature.com and processing real customer transactions. The customer-facing storefront features a full-screen video hero, an interactive product quiz that recommends seasonal formulas based on TCM five-element theory, subscription management with Stripe, and a Sanity CMS-powered journal with recipes and educational guides. The admin dashboard - built with a dark theme and command palette - provides complete operational control: multi-step order fulfillment (draft → paid → shipped → delivered), real-time inventory with low-stock alerts and virtual bundle calculations, customer CRM with lifetime value tracking, subscription management, lead pipeline, and revenue reporting. Built entirely through vibe coding with Claude Code, from database schema design to deployment on Vercel - every product, design, and technical decision driven personally. The architectural lessons from this build informed Orchard, the from-scratch multi-tenant commerce control plane that now hosts Human Nature alongside Besteas and De Alma y Corazón.
The Problem
A Portland-based herbal supplement brand needed a complete digital presence - not just a storefront, but a platform that could handle seasonal product drops, subscriptions, inventory, order fulfillment, and educational content, all while reflecting the brand's premium TCM-rooted identity.
The Solution
Built end-to-end using vibe coding with Claude Code: a customer-facing Next.js storefront featuring a TCM-based product quiz, five-element seasonal collection, Stripe subscriptions, and Sanity CMS journal - paired with a full admin dashboard for orders, inventory, customers, subscriptions, leads, and reporting.
Impact
- 1Live at shophumannature.com and processing real transactions - storefront, admin, payments, subscriptions, email, and shipping all running in production
- 2Interactive "Find Your Formula" quiz mapping users to seasonal TCM products
- 3Complete admin suite: order fulfillment pipeline, real-time inventory, CRM, and analytics
- 4Integrated Stripe subscriptions, Mailchimp email marketing, EasyPost shipping, and Sentry monitoring
Key Decisions
- Designed, built, and shipped end-to-end - product management, brand and UX design, full-stack implementation, QA, deployment, and operations. Claude Code as pair-programmer across database schema, application code, and production deployment
- Entire platform built via vibe coding with Claude Code - from database schema to production deployment
- Designed dual experiences: an elegant, editorial-quality storefront and a dark-themed operational admin dashboard
- Mapped brand identity to TCM five-element theory with seasonal accent colors (Spring/sage, Summer/coral, Autumn/rust, Winter/slate)
- Chose stateless HMAC-signed cookies for admin auth - no session store needed
- Built auto-calculating virtual bundle stock (bundle available only if ALL components in stock)
Lessons Learned
Vibe coding works best when you deeply understand the domain - AI generates code, but the human provides the product vision and edge-case awareness
E-commerce is 20% storefront, 80% operations - the admin dashboard, fulfillment pipeline, and inventory logic are where the real complexity lives
A cohesive brand system (typography, color, motion) elevates even a template-based build into something that feels bespoke
Screens
1 / 5