Back to Projects ArchiveProject 01 of 04

Hackathon Prototype • Technical Case StudyLuxury E-Commerce & Spatial Logistics

MENSAH

Luxury Tailoring & Spatial Logistics Prototype

A luxury menswear e-commerce prototype exploring bespoke monogram customization, deterministic measurement-based sizing recommendations, Haversine spatial courier matching, and conversational WhatsApp order manifests.

React 19Vite 8GSAP 3Vanilla CSSHaversine MathWhatsApp API

Live Prototype GitHub Repo

https://mensah-lex.vercel.app

Verified Live Deployment

Production storefront rendering Savile Row structure with West African sartorial silhouettesDual-View Atelier

Project Classification

Hackathon Prototype

Engineered independently to demonstrate luxury bespoke e-commerce and algorithmic logistics.

Virtual Fitting Formula

Deterministic Arithmetic Mean

Calculated via average of chest, waist, and hips. Not an AI model or machine-learning neural net.

Courier Logistics

Haversine Distance (R = 6371km)

Predefined Accra neighborhood coordinates animated on a vector map. Not real-time GPS telemetry.

Checkout Integration

WhatsApp Order Manifest

Direct-to-merchant conversational handshake. Not an automated credit card payment gateway.

01 • CONCEPT & AUDIENCE

Project Overview & Spatial Purpose

MENSAH is a luxury menswear e-commerce prototype tailored for high-end West African sartorial fashion—specifically ceremonial Grand Agbadas, Senator tunics, and modern Italian-cut double-breasted suits. Developed during a hackathon sprint, the project explores how digital storefronts can accommodate garments that cannot be treated like standard commodity off-the-rack t-shirts.

The platform serves discerning clients seeking bespoke garments sewn to individual bodily proportions with custom monogramming. It addresses two distinct perspectives:

The Client Experience (Atelier & Mall)

Allows clients to explore editorial brand stories without immediate price pressures, transition into a commercial boutique, submit measurements through a conversational virtual tailor, customize gold embroidery initials, and finalize bespoke commissions via WhatsApp.

The Boutique Operations (Logistics & Admin)

Provides a merchant portal to inspect incoming commission references, publish seasonal lookbook drops, and calculate the closest Accra courier using spherical trigonometry to orchestrate last-mile atelier pickups.

02 • PROBLEM STATEMENT

The Product Challenge & Technical Scope

Rigid Off-the-Rack Sizing Paradigms

Standard commercial cart platforms force customers into arbitrary S, M, or L classifications. High-value African menswear (such as weighted damask Agbadas) requires specific sleeve drops, chest spans, and waist circumferences. Off-the-rack selections frequently lead to ill-fitting garments and costly manual alterations.

Informal Last-Mile Courier Coordination

In metropolitan Accra, delivery addresses frequently reference localized landmarks (e.g. American House, Osu Oxford St, Cantonments) rather than formal postal codes. Boutique owners often dispatch motorcycle couriers ad-hoc without calculating which dispatch rider is geographically closest to the atelier.

Bespoke Customization in Checkout

Luxury clients require custom monogram embroidery (e.g. gold cuffs) and direct communication with the tailor. Standard checkout gateways isolate the customer from the artisan; MENSAH bridges this via structured payload compilation into direct WhatsApp conversations.

03 • SOLUTION ARCHITECTURE

Integrated Data Flow & Dual-View Engine

How client interactions, mathematical calculations, and fallback data structures flow through React 19.

MENSAH End-to-End System Pipeline

Source: user_flow_architecture.md

1. Entry & Catalog

React attempts GET /items. If API fails, auto-binds FALLBACK_CATALOG (10 pre-seeded garments).

2. Sizing Assistant

User inputs chest, waist, and hips. Runs deterministic arithmetic mean formula and injects size label into order note.

3. Checkout Handshake

Sends POST /baskets payload. Responds with ID or local reference, compiles WhatsApp deep-link.

4. Spatial Dispatch

Admin executes Haversine formula across 3 predefined Accra couriers; GSAP animates vector courier trajectory to Boutique and customer.

04 • CODE-LEVEL FEATURE DEEP DIVES

Verified Technical Implementation

Direct examination of the algorithms, equations, and code paths driving the prototype.

1. Measurement-Based Virtual Fitting

Deterministic Arithmetic Sizing • Not an AI / Neural Model

App.jsx: L524-L560

The virtual fitting assistant is an interactive conversational step machine that guides the client through three validated anatomical measurement inputs: chest circumference (80–130 cm), natural waist (40–180 cm), and maximum hip circumference (50–180 cm). Rather than employing a black-box machine learning model, it computes a deterministic arithmetic mean and maps it into discrete tailoring bins.

src/App.jsx — calculateChatbotFitting()

// Source: mensah-retail/src/App.jsx (Lines 524-555)
const calculateChatbotFitting = (metrics) => {
  setTimeout(() => {
    // 1. Compute deterministic arithmetic mean of 3 body circumferences
    const averageMetric = (metrics.chest + metrics.waist + metrics.hips) / 3;
    let finalLabel;
    let matchingScore;

    // 2. Discrete classification thresholds
    if (averageMetric < 85) {
      finalLabel = 'Tailored S';
      matchingScore = 92;
    } else if (averageMetric < 98) {
      finalLabel = 'Tailored M';
      matchingScore = 97;
    } else if (averageMetric < 112) {
      finalLabel = 'Bespoke L';
      matchingScore = 94;
    } else {
      finalLabel = 'Sartorial XL';
      matchingScore = 89;
    }

    const scoreTag = `${matchingScore}% Silhouette Match`;
    const sizeTag = `${finalLabel} (${fitPreference.toUpperCase()})`;

    // 3. Auto-bind coordinates to state for injection into order note
    setChatbotFitScore(scoreTag);
    setChatbotSizeLabel(sizeTag);
    setChatStep(5);
  }, 1000);
};

< 85 cm

Tailored S

92% Match Score

85 - 97 cm

Tailored M

97% Match Score

98 - 111 cm

Bespoke L

94% Match Score

≥ 112 cm

Sartorial XL

89% Match Score

Limitations of the Deterministic Calculation

While predictable and zero-latency, an arithmetic mean averaging chest, waist, and hips does not account for shoulder width, athletic drop ratios (e.g. broad chest with a narrow waist), or height. The confidence scores (e.g. 97%) are hardcoded UX heuristics rather than empirical statistical probabilities.

2. Haversine Spatial Proximity & Animated Route Map

Spherical Trigonometry • Predefined Vector Coordinates • Not Live GPS

App.jsx: L144-L155, L580-L635

To coordinate delivery dispatches from the physical atelier in East Legon, the merchant portal implements the mathematical Haversine great-circle distance formula on a spherical Earth model (R = 6,371 km). It evaluates the radial distance between the boutique and three predefined motorcycle courier positions across Accra.

src/App.jsx — haversineDistance() & handleAutoDispatch()

// Source: mensah-retail/src/App.jsx (Lines 144-154)
function haversineDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // Earth's mean radius in km
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
    
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c; // Returns distance in kilometers
}

// Dispatch Matching Loop (Lines 590-605)
let closestCourier = null;
let minDistance = Infinity;

couriers.forEach(courier => {
  const dist = haversineDistance(courier.lat, courier.lng, BOUTIQUE_LAT, BOUTIQUE_LNG);
  if (dist < minDistance) {
    minDistance = dist;
    closestCourier = courier;
  }
});

Kojo Mall Rider

Lat: 5.6213, Lng: -0.1735

Location: Accra Mall / Tetteh Quarshie

Yaw Osu Dispatch

Lat: 5.5502, Lng: -0.1901

Location: Osu Oxford Street corridor

Akosua Cantonments

Lat: 5.5790, Lng: -0.1601

Location: Cantonments embassy zone

Distinction: Mathematical Simulation vs Live GPS Telemetry

The courier route is rendered on an SVG vector grid map using GSAP timeline tweens (duration: 2.2s to the boutique, then duration: 3.5s to the destination). Courier locations are represented by static mathematical seeds rather than real-time hardware GPS pings or IoT cellular trackers.

3. Bespoke Customization & WhatsApp Checkout Manifest

Gold Monogramming • Two-Stage Handshake • Conversational Order Settlement

App.jsx: L690-L760, api.js: L45-L68

Clients can input personalized gold embroidery monograms (e.g. initials JM) and custom tailoring notes (e.g. sleeve length adjustments). During checkout, the application compiles these inputs into an itemized payload, dispatches a POST /baskets request to the REST backend, and constructs a URL-encoded WhatsApp order manifest.

src/App.jsx — Order Payload & WhatsApp Handshake

// Source: mensah-retail/src/App.jsx (Lines 703-755)
const basketPayload = {
  merchant_id: 'mensah',
  team_slug: 'likekodji',
  items: cart.map(i => ({
    id: i.id,
    name: i.name,
    qty: i.qty,
    price_minor: i.price_minor,
    note: i.note // E.g. 'Gold Monogram: "JM". Size: Bespoke M (Tailored)'
  })),
  customerName: checkoutName,
  customerPhone: checkoutPhone,
  customerNote: checkoutNote
};

// Resilient API Handshake with Fallback Reference
let basketId = `BSK-${Date.now().toString(36).toUpperCase()}`;
try {
  const result = await submitBasket(basketPayload);
  if (result && result.id) basketId = result.id;
} catch (apiErr) {
  console.warn('API registration offline; proceeding with local bespoke reference:', apiErr);
}

// Deep-link generation bypassing browser pop-up blockers
const whatsappUrl = `https://wa.me/${whatsappMerchantNumber}?text=${encodeURIComponent(whatsappText)}`;
window.open(whatsappUrl, '_blank');

Commercial Boundary: Conversational Intake vs Payment Settlement

The WhatsApp redirect hands off the structured order to an atelier sales concierge. This design aligns with luxury Ghanaian commerce conventions—where high-ticket commissions are finalized through personal conversation and bespoke fabric verification—rather than acting as an automated credit card settlement gateway.

05 • ARCHITECTURE & RESILIENCE

Technical Stack & Offline Resilience Strategy

Core Application Stack

React 19 & Vite 8: ES module architecture with componentized modals and reactive cart drawer state.
GSAP 3.15: Drives seamless view crossfades between the Brand Runway and Storefront Mall, message slide-ins, and vector courier paths.
1,180+ Lines Vanilla CSS: Custom design token architecture (index.css) ensuring precise dark luxury typography (Playfair Display & Inter) without framework dependencies.

Offline Catalog Fallback Strategy

During hackathon testing, external endpoints at api-hackathon.codedematrixtech.com were observed returning HTTP 404 errors. To prevent broken views, the frontend integrates a pre-seeded catalog of 10 bespoke outfits (FALLBACK_CATALOG) and lookbook drops (FALLBACK_CAMPAIGNS).

When an API request fails, the application catches the network exception, populates local catalog states, and displays a non-intrusive alert, ensuring the live demo remains fully navigable.

06 • IMPLEMENTATION DECISIONS

Key Technical Decisions & Trade-Offs

Domain	Approach Chosen	Architectural Benefit	Technical Limitation
Virtual Fitting	Deterministic 3-point arithmetic mean	Zero latency, zero model hosting costs, 100% predictable	Does not capture height, posture, or drape variations
Spatial Logistics	Haversine formula on static coordinates	Self-contained spherical calculation without external map billing	Simulated demonstration rather than live GPS tracking
Catalog Data	Hardcoded fallback array on network failure	Guarantees portfolio & demo uptime when API 404s	Client catalog diverges from backend database changes
Checkout Flow	Structured WhatsApp URL deep-link	Immediate direct-to-artisan conversational verification	Lacks automated webhook order reconciliation & settlement

07 • HONEST ASSESSMENT

Verified Challenges & System Limitations

External API Unavailability

The external backend endpoint (api-hackathon.codedematrixtech.com) was designed for ephemeral hackathon evaluation and has experienced persistent 404 responses. While the frontend fallback preserves 100% visual functionality, live lookbook creation and server-side team analytics cannot be permanently synchronized.

Absence of Live Telemetry & Gateway Callbacks

The courier dispatch pipeline illustrates geometric proximity matching, but lacks an active GPS driver app or real-time WebSockets connection. Similarly, the checkout flow hands off an order manifest to WhatsApp rather than executing a verified payment gateway transaction (e.g. Paystack or Mobile Money webhook reconciliation).

08 • FUTURE WORK

Proposed Future Architecture Improvements

Key enhancements identified to elevate the prototype into a production-grade bespoke commerce suite:

Multi-Point 3D Body Mesh Fitting

Transition from a simple 3-metric average to an anatomical 8-point measurement geometry (shoulder slope, sleeve inseam, collar circumference) with a real-time Three.js / WebGL parametric mannequin preview.

Real-Time Geolocation Telemetry

Replace predefined coordinate seeds with a lightweight mobile courier PWA publishing real-time coordinates via Supabase WebSockets or Mapbox GL, tracking live motorcycle movements through traffic.

Hybrid Payment Gateway & Ledger

Integrate Paystack Mobile Money (MoMo) webhook callbacks to confirm deposit payments before commission tailoring, while retaining the conversational WhatsApp concierge for final fitting appointments.

09 • RETROSPECTIVE

Engineering & Product Reflection

Building MENSAH during a hackathon sprint highlighted the critical boundary between an ambitious visual prototype and an operational production system. In luxury e-commerce, user experience cannot be separated from cultural and domain context: African bespoke menswear does not fit neatly into off-the-shelf Western checkout flows where one clicks “Add to Cart” on an “XL” garment and expects immediate shipping.

From a software engineering perspective, the most valuable architectural pattern was the offline fallback catalog. When third-party hackathon APIs collapsed, the application did not fail with empty screens or uncaught exceptions; instead, it gracefully degraded to verified local assets. True craft lies not in assuming every API will always respond with HTTP 200, but in structuring user interfaces that remain dignified, communicative, and resilient under failure conditions.

Return to All Projects

Live Prototype ↗•GitHub ↗

Project 02 • Commercial Platform

Chef Apedo Foods

Full-cycle food ordering, real-time kitchen operations & courier dispatch platform.

• Case Study AvailableRead Case Study

Project 03 • Academic Software Engineering

Raku Vehicle Rental Management System

Fleet inventory, client reservations & backoffice management engine.

• Case Study AvailableRead Case Study

Project 04 • Nonprofit Platform & Health Hub

Davcie Foundation

Paediatric diabetes health education, emblem motion physics & authenticated admin portal.

• Case Study AvailableRead Case Study