Project logo
2024
Metro OTC

White-Label E-commerce Core

Architecting a multi-tenant retail engine using Nuxt Layers for maximum code reusability.

The Concept: Scalability through Inheritance We moved away from the "one codebase per client" model to create a modular Core. By treating the e-commerce engine as a set of inheritable layers, we can deploy unique, brand-specific storefronts that share a single, robust source of truth.

The Challenge: The Divergent Codebase Risk

The client required multiple branded stores operating under exclusive contracts with insurance companies. A standard approach—cloning a template for every new brand—would lead to a "Maintenance Trap," where critical updates and security patches would need to be manually applied to dozens of separate repositories.

We identified critical architectural requirements:

  • Unified Core: A logic update must propagate to all storefronts instantly.
  • Brand Autonomy: Each tenant needs unique visual branding and distinct payment rules without altering the core engine.
  • Infrastructure Security: The legacy system relied on unmanaged consumer-grade storage, creating critical dependencies and security risks.

The Solution: Multi-Tenant System Design

I engineered a Layered Architecture that strictly separates core business logic from client-specific presentation, utilizing Nuxt 3's modern composition features.

1. Nuxt Layers Foundation

Instead of a monolithic app, the system is split into independent, versioned contexts:

  • The Base Layer: Contains the "Core Logic"—Auth (SMS/Email/Password), Global State Management, and API wrappers.
    e-core main page
    The Universal Core Interface before branding
  • The Logic Layer: Encapsulates complex business rules, such as "Insurance Plan" validation and vector-based Smart Search.
  • The Tenant Layer: The final "Skin." It extends the Base, overriding only necessary CSS variables and specific components, keeping the footprint minimal.
    Metro OTC main page
    Each tenant needs unique visual branding... without altering the core engine

2. Serverless Infrastructure (AWS)

To support the core, I architected a serverless utility belt for asset distribution:

  • Enterprise Asset Pipeline: Replaced the unstable legacy storage with a custom S3 + CloudFront architecture, ensuring global caching and low-latency delivery.
  • Immutable Asset Links: Implemented a Serverless Lambda function to decouple "Physical Files" from "Public Links." This allows the client to silently hot-swap catalog files (e.g., updating seasonal catalogs) without invalidating distributed QR codes or public URLs.

3. Advanced Commercial Logic

This is not just a storefront; it is a logic engine.

  • Dynamic Discounting: A rule-based promo engine where discount applicability depends on complex cart conditions.
  • Hybrid Payment Gateways: Integration of standard payments alongside custom "Insurance Card" APIs with manual back-office verification flows.

Business Outcomes

Transitioning to this architecture allowed us to shift the operational model from reactive maintenance to proactive scaling:

  • Rapid Deployment: New brands can be launched in days, not weeks, by inheriting the core.
  • Operational Stability: Migrating to AWS/CDN eliminated infrastructure bottlenecks and maximized uptime.
  • Eliminated Code Drift: Instead of managing N divergent repositories, we maintain one. Updates propagate instantly, preventing the fragmentation typical of multi-tenant scaling.
Smart Search for Metro OTC
Smart Search for Metro OTC. It features "Postgres-Native Vector Search", allowing the system to map vague symptoms (natural language) to specific medical products using high-dimensional embeddings, rather than simple keyword matching
Nuxt 3 (Layers)
Multi-tenant Architecture
Vector Search logic
AWS Serverless (S3/Lambda)