Skip to content

Case Study

Modular Website Framework: One Architecture, Two Distinct Businesses

Role: Full-Stack Developer & UX DesignerDuration: 8 hours (MVP) + 3-5 hours per deploymentStatus: 2 sites live
Next.js 16React 19TypeScriptTailwind CSS 4SupabaseSquare PaymentsResendVercel

Overview

Small businesses often need more than a static site - they need a store, an admin panel, image optimization, and email automation - but agency pricing is out of reach and DIY platforms like Squarespace or Shopify are either too limited or too expensive at scale.

I built a reusable architecture that deploys as a fully-customized, branded business site in 3-5 hours. Two live businesses - a kigurumi artisan and a handcrafted goods marketplace - run on the same framework infrastructure while looking and functioning completely differently from each other.

Scale

8 hrs

Initial MVP build

3-5 hrs

Per-site deployment

95+

Lighthouse Performance

40%

Bundle reduction

94.7%

Image compression

WebP pipeline

Example: 902KB -> 48KB

<500ms

DB query target

$0

Monthly infra cost (baseline)

Technical Architecture

FrameworkNext.js 16.1.6 (App Router), React 19, TypeScript
StylingTailwind CSS 4 - CSS variable theming system for per-deployment brand identity
DatabaseSupabase PostgreSQL with Row Level Security and backward-compatible multi-image schema
PaymentsPayment processor-agnostic database design - Square on one deployment, Stripe-ready on the other
EmailResend
HostingVercel
ImagesAutomated WebP conversion and optimization pipeline - 90-95% file size reduction
AccessibilityAutomatic WCAG AA contrast compliance via CSS variable system
PerformanceDynamic imports for 40% bundle reduction, sub-500ms queries

The CSS variable theming system is the key to brand differentiation without maintaining separate codebases. Each deployment gets a theme file that maps colors, fonts, and spacing - layout and component logic is shared. Automatic WCAG AA contrast checking runs against theme variables at build time.

What Was Built

DesignsByADino logo

DesignsByADino

designsbyadino.com->

Handcrafted kigurumi e-commerce

  • ·Product catalog with variant support
  • ·Square Payments checkout
  • ·Order management panel
  • ·Image gallery with WebP optimization
  • ·Automated inventory status
Amy's Hen House logo

Amy's Hen House

amyshenhouse.com->

Handcrafted goods marketplace

  • ·Multi-category product browsing
  • ·Custom product variant matrix
  • ·Fulfillment status tracking
  • ·Customer notification emails
  • ·Seller admin panel
DesignsByADino
Amy's Hen House
Business type
Handcrafted kigurumi e-commerce
Handcrafted goods marketplace
Catalog structure
Single-artisan product catalog - each item handmade, limited quantities
Multi-category shop - crafts, home goods, seasonal collections
Checkout
Square Payments integration with order management
Stripe-ready checkout with custom variant matrix
Fulfillment
Per-order admin with custom status tracking
Fulfillment tracking with customer status notifications
Admin tools
Product management, image uploads, order processing
Seller admin panel, bulk product management, category tools
Visual identity
Warm artisan aesthetic. Red dragon brand mark. Cozy-creative tone.
Cheerful cottage-market feel. Blue house icon. Warm and approachable.

Screenshots

DesignsByADino homepage
Amy's Hen House homepage
DesignsByADino - product view
Amy's Hen House - contact page

Technical Highlights

  • ->CSS variables are the right abstraction for multi-brand theming - not separate codebases, not CSS-in-JS, not runtime theme switching.
  • ->Making the database schema payment-processor-agnostic from day one meant the two deployments can run different payment providers with zero schema differences.
  • ->40-60% velocity improvement after the first deployment covers the upfront investment in the framework quickly.
  • ->Two businesses that look and feel completely different can share 95% of their infrastructure - the theming system does the heavy lifting.