Config-Driven E-Commerce at Scale: The RollON Architecture

How RollON achieves 117 tests and 87% coverage, config-driven branding, and robust checkout flows in a reusable React/TypeScript e-commerce template — without sacrificing flexibility or performance.

The Problem: Every E-Commerce Project Starts From Scratch

E-commerce seems solved: product catalog, cart, checkout, admin dashboard. Yet every project rebuilds these primitives with slight variations. Brands want custom branding, products have variant matrices, checkout flows differ by region, and accessibility requirements vary by client.

RollON was built to solve this: a production-grade e-commerce template that's config-driven rather than hardcoded, so each deployment is a new configuration, not a new codebase. The result: ship a branded store in days, not months, while maintaining 117 tests, 87% coverage, and WCAG 2.1 AA compliance.

Architecture: Configuration as Code

Instead of embedding business logic in components, RollON externalizes everything into typed configuration:

• Product Catalog — Defined in TypeScript interfaces with variant support (size, color, bundle), pricing rules, and inventory thresholds. The catalog is a pure data structure; UI components render whatever shape the data takes.
• Branding Layer — Colors, typography, logo, and layout density are pulled from a single `config.ts` file. Deploy to a new client by changing config, not rewriting CSS.
• Checkout Pipeline — A state machine orchestrates cart → address → payment → confirmation. Each stage is independently testable and replaceable.

// Simplified RollON config-driven product
export interface ProductConfig {
  id: string;
  name: string;
  variants: Variant[];
  pricing: PricingRule[];
  images: string[];
  metadata: Record;
}

export const catalog: ProductConfig[] = [
  {
    id: "tshirt-classic",
    name: "Classic Tee",
    variants: [
      { sku: "TSH-S", size: "S", color: "Black", price: 29 },
      { sku: "TSH-M", size: "M", color: "Black", price: 29 },
    ],
    pricing: [{ minQty: 10, discount: 0.15 }], // 15% off bulk
    images: ["/products/tee-black-1.jpg"],
    metadata: { material: "100% cotton", origin: "Bangladesh" },
  },
];

Testing Strategy: 117 Tests, 87% Coverage Without Test Debt

RollON maintains 117 automated tests with 87% coverage across unit and Playwright E2E suites (106 unit + 11 Playwright), matching the current repo README. The key insight: test the config system, not the components.

"If your e-commerce tests hardcode product names, they're testing the wrong thing. Test that the catalog renders any valid config, that the cart math works for any pricing rule, and that checkout rejects invalid states. Product-specific tests are configuration validation, not architecture tests."

Our test pyramid:

• Unit tests (Vitest) — Pricing math, variant selection, cart persistence, form validation
• Integration tests — Checkout state machine transitions, address validation, payment webhooks
• E2E tests (Playwright) — Full purchase flows, admin dashboard CRUD, accessibility audits

Performance: Why Bundle Size Matters for E-Commerce

E-commerce sites live or die by conversion rate. Every 100ms of load time costs ~1% in conversions. RollON is optimized at multiple levels:

• Code splitting — Admin dashboard, checkout, and catalog load independently. A visitor browsing products never downloads admin code.
• Image optimization — Responsive srcset with WebP/AVIF fallbacks. Product images lazy-load with blur-up placeholders.
• CSP-hardened — Strict Content Security Policy prevents XSS without breaking inline styles or analytics.

Key Takeaways & Lessons Learned

1. Config over convention — In a template, "convention" becomes a constraint. Externalizing decisions into typed config lets each deployment customize without forking.
2. Test the machine, not the instance — Test that pricing math works for any rule, not that a specific product costs $29. This cuts test count while increasing coverage breadth.
3. Accessibility is non-negotiable — WCAG 2.1 AA compliance isn't a feature; it's a baseline. Keyboard navigation, screen reader labels, and color contrast are built in from day one.