Shopwus

A multi-tenant commerce and storefront management platform designed for bespoke merchants and service providers. Combines a high-density enterprise intelligence dashboard with decoupled public storefronts, custom domain routing, Paystack split settlements, and real-time order delivery tracking.

Next.js 16React 19TypeScriptTailwind CSS v4FastifyPrisma ORMPostgreSQLPaystackSocket.IOpg-boss

View Live View Source

Overview

Shopwus is an all-in-one multi-tenant commerce and studio operating system engineered for luxury artisans, bespoke service providers, and independent merchants. It bridges the gap between client inquiry management, digital storefront customization, automated invoicing, order fulfillment, and automated split-payment treasury operations.

The Problem

Traditional e-commerce platforms like Shopify and WooCommerce are bloated, require costly third-party plugins, and are ill-fitted for businesses offering a hybrid of bespoke appointments and physical products in emerging markets. Merchants frequently struggle with manual payment reconciliations, complex courier fee handling, high checkout drop-offs, and disjointed customer communication across disparate tools.

The Solution

Engineered an end-to-end multi-tenant platform pairing a high-density fintech management portal with high-converting, mobile-first client storefronts (subdomains and custom domains via Cloudflare for SaaS). Built an automated treasury and checkout pipeline integrating Paystack split subaccounts, automated logistics ledger sweeps, real-time WebSocket order feeds, and asynchronous notification workers.

Design Flow

Step 1: Merchant & User Discovery — Researched checkout drop-offs and operational friction points for bespoke merchants.

Step 2: Information Architecture & Data Modeling — Architected multi-tenant boundaries, split payment ledgers, and role-based permissions in PostgreSQL.

Step 3: Enterprise UI & Design System — Designed the "Analytics & Enterprise Intelligence" system with Tailwind v4 semantic tokens and zero hex-debt.

Step 4: Interactive Storefront Prototyping — Created frictionless buyer checkout flows, 3D luxury studio cards, and responsive order drawers.

Step 5: Full-Stack Integration — Built the Fastify API with Zod validation, Next.js 16 App Router storefronts, and Paystack webhook listeners.

Step 6: Optimization & Stress Testing — Configured connection pool timeout guards, automated CSV exports, and asynchronous queue workers.

Schema Design

Designed a multi-tenant relational schema using PostgreSQL and Prisma:
• Business: Core tenant entity containing branding, custom domain SSL verification, bank metadata, operating hours, and shipping thresholds.
• Order & OrderItem: Immutable order snapshots, financial breakdowns (subtotal, delivery fee, platform fee, merchant earnings), fulfillment state machine, and Paystack split references.
• BusinessBilling & PaymentTransaction: Dedicated ledger tracking Paystack subaccounts, platform cuts, gateway fees, and webhook reconciliation logs.
• LogisticsSweep & LogisticsLedgerEntry: Dedicated treasury tracking for automated batching and settlement of courier logistics fees.
• CheckoutSession: Real-time cart session capturing buyer contact data to identify and recover abandoned checkouts.
• Customer, Service, Product, Invoice, Expense: Unified operational registers supporting complete studio business management under tenant isolation.

Technical Decisions

Next.js 16 (App Router) & React 19: Leveraged React Server Components for fast initial storefront loads and dynamic tenant routing.
Fastify & Zod: Built a high-throughput, low-latency REST API with compile-time and runtime request validation.
Prisma ORM with PostgreSQL: Implemented type-safe database queries with strict transactional timeout guards against PgBouncer poolers.
Tailwind CSS v4 & Semantic Design Tokens: Enforced a strict zero hex-debt standard for an enterprise fintech visual aesthetic.
Cloudflare for SaaS Custom Hostnames: Provided automated, zero-maintenance SSL provisioning for merchant custom domains (BYOD).
Paystack Subaccounts & Webhook Pipeline: Automated merchant payouts and platform commission splits directly at checkout.
pg-boss Background Queues: Offloaded third-party email (Resend) and SMS notifications out of the synchronous HTTP lifecycle.
Socket.IO Real-time Events: Enabled instant order alerts and audible chimes without polling.

Challenges

Preventing database connection pool exhaustion during concurrent Paystack webhook spikes by configuring explicit transaction timeouts and retries.
Decoupling the high-density enterprise dashboard design from the client-facing storefronts while sharing business models.
Managing zero-downtime multi-tenant custom domain routing and SSL issuance via Cloudflare API with CNAME/TXT verification.
Eliminating fractional currency rounding discrepancies across multi-party split payments and logistics sweeps using Prisma Decimal types.
Minimizing checkout latency by shifting notification dispatch to background job workers.

Key Learnings

Offloading non-critical webhook communications to background job queues is essential for sub-100ms payment confirmations.
Establishing strict semantic design tokens early prevents visual regressions and maintains enterprise-grade design density.
Decoupling merchant configuration state from immutable order snapshots guarantees historical audit integrity.
Connection poolers like PgBouncer require explicit interactive transaction timeout guards to prevent deadlocks under heavy load.

Results

Delivered a production-ready, multi-tenant commerce and studio platform that reduces merchant onboarding and store setup time to under 5 minutes. Reduced checkout latency to sub-200ms with automated split settlement, eliminating manual payment reconciliations. Achieved end-to-end type safety across the stack with an accessible, high-density dashboard and high-converting, mobile-first storefronts.

Loading content...