WeeklyWardrobe

Web3 Fashion Sharing Platform

WeeklyWardrobe is a Web3-integrated fashion sharing application offering subscription-based clothing delivery and secure lending. At its core is a proprietary Style Matching Engine that quantifies fashion preferences into a 5-axis mathematical model, comparing user taste vectors against clothing profiles to deliver personalized recommendations. The platform leverages the Thirdweb SDK for blockchain features including NFT-based clothing ownership and crypto payments.

Architecture & How It Works

The project follows a decoupled full-stack architecture separating the React/Vite client from the Node.js/Express API. The frontend handles presentation, routing, and Web3 wallet interactions via the Thirdweb SDK. The backend exposes RESTful endpoints and houses the Style Matching Engine, which uses an in-memory object-oriented data layer (server/objects/) to manage users, clothing items, and products. When a user sets their style preferences, the backend compares their StyleObjectvector against every clothing item's vector and returns sorted recommendations above the user's match threshold.

1. Style Matching Engine (Vector Comparison)

Every user, clothing item, and product is assigned a StyleObjectthat tracks five core fashion dimensions, each scored on a 1–5 scale. The backend calculates a “Match Percentage” by comparing the user's style vector against each clothing item's vector, enabling mathematically precise fashion recommendations.

// The StyleObject — 5-axis fashion vector
const StyleObject = {
  vintage:     3,  // 1-5 scale
  smartCasual: 4,  // 1-5 scale
  sporty:      2,  // 1-5 scale
  formal:      5,  // 1-5 scale
  party:       1   // 1-5 scale
};

// Match calculation: vector distance comparison
function calculateMatch(userStyle, clothingStyle) {
  const axes = Object.keys(userStyle);
  const maxDistance = axes.length * 4; // max diff per axis = 4
  const totalDiff = axes.reduce((sum, axis) =>
    sum + Math.abs(userStyle[axis] - clothingStyle[axis]), 0
  );
  return ((maxDistance - totalDiff) / maxDistance) * 100;
}

2. Dynamic Style Learning & Threshold Filtering

The system isn't static—it learns from user interactions. When a user rates or interacts with a piece of clothing, the updateStyleObject logic modifies their preference vector, refining future recommendations over time:

●Preference Drift: Each interaction nudges the user's StyleObject toward the rated item's style profile. Positive interactions increase alignment; negative interactions push the vector away.
●Threshold Control: Users can set a minimum match percentage (e.g., 75%) to filter out low-relevance items, ensuring only highly compatible clothing surfaces in their feed.
●Feedback Loop: The combination of vector drift and threshold filtering creates a self-improving recommendation pipeline—the more a user interacts, the more tailored the results.
updateStyleObject(user, ratedItem, sentiment) → user.styleObject adjusted

3. Web3 Integration (Thirdweb SDK)

The platform incorporates blockchain infrastructure using the @thirdweb-dev/react and @thirdweb-dev/sdk packages to handle decentralized operations. This enables NFT-based clothing ownership verification—where lending a physical garment is backed by a token transfer—and crypto payment flows for subscription plans. The Thirdweb provider wraps the React app, giving every component access to wallet state, contract interactions, and chain-specific logic without manual Web3 boilerplate.

Tech Stack & Tools Used

Frontend & UI

React 18 & Vite: Component-based SPA with hot-module replacement for rapid iteration.
React Router v6: Client-side navigation between browse, profile, and checkout views.
Material UI (MUI): Professional component library for consistent, accessible UI elements.
Tailwind CSS: Utility-first styling for responsive layouts and custom design tokens.
React Slick: Dynamic image carousels for showcasing clothing items and collections.

Backend, Web3 & DevOps

Node.js & Express: RESTful API handling style matching, user profiles, and clothing data.
Thirdweb SDK: Blockchain integration for NFT ownership, crypto payments, and wallet management.
Jest: Backend unit testing framework with coverage reporting for the style engine.
Docker: Containerized deployment with shell scripts for orchestration.
Axios & CORS: HTTP client for API communication and cross-origin request handling.

Architecture Diagram

📐System Architecture & Data Flow

[ ARCHITECTURE OVERVIEW ]

┌─────────────────────────────────────────────────────────────┐
│                     CLIENT LAYER                            │
│                     React 18 + Vite                         │
│                                                             │
│   ┌───────────────────┐    ┌───────────────────┐            │
│   │  Clothing Browse  │    │   Style Profile   │            │
│   │  React Slick      │    │   StyleObject UI  │            │
│   │  Carousel Render  │    │   5-Axis Editor   │            │
│   └────────┬──────────┘    └────────┬──────────┘            │
│            │                        │                        │
│   ┌────────┴────────────────────────┴──────────┐            │
│   │           React Router v6                   │            │
│   │           MUI + Tailwind CSS                │            │
│   └────────────────────┬───────────────────────┘            │
│                        │                                     │
│   ┌────────────────────┴───────────────────────┐            │
│   │         Thirdweb React SDK                  │            │
│   │         NFT Ownership / Crypto Payments     │            │
│   └────────────────────┬───────────────────────┘            │
└────────────────────────┼────────────────────────────────────┘
                         │  Axios / REST
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                     SERVER LAYER                            │
│                     Node.js + Express.js                    │
│                                                             │
│   ┌─────────────────────────────────────────────────────┐   │
│   │         Style Matching Engine                       │   │
│   │                                                     │   │
│   │   StyleObject = {                                   │   │
│   │     vintage:      1-5,                              │   │
│   │     smartCasual:   1-5,                              │   │
│   │     sporty:       1-5,                              │   │
│   │     formal:       1-5,                              │   │
│   │     party:        1-5                               │   │
│   │   }                                                 │   │
│   │                                                     │   │
│   │   matchPercentage = compareVectors(                 │   │
│   │     user.styleObject,                               │   │
│   │     clothing.styleObject                            │   │
│   │   )                                                 │   │
│   │                                                     │   │
│   │   if (matchPercentage >= user.threshold)            │   │
│   │     → recommend(clothing)                           │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                             │
│   ┌─────────────────────────────────────────────────────┐   │
│   │         In-Memory Data Layer                        │   │
│   │         server/objects/                              │   │
│   │                                                     │   │
│   │   User.js      → StyleObject + preferences          │   │
│   │   Clothing.js  → StyleObject + metadata              │   │
│   │   Product.js   → StyleObject + pricing               │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                             │
│   Flask-CORS enabled for cross-origin dev requests          │
└─────────────────────────────────────────────────────────────┘

Data Flow:

  [User Sets Style Preferences] → 5-Axis StyleObject
       │
       ▼
  POST /api/match → Style Matching Engine
       │
       ├─ Compare user vector vs clothing vectors
       ├─ Calculate match percentage per item
       └─ Filter by threshold
       │
       ▼
  { recommendations: [...sorted by match %] }

  [User Rates Clothing] → updateStyleObject()
       │
       ▼
  User StyleObject dynamically adjusts
       │
       ▼
  Future recommendations refined

Local Execution & Testing

The project requires running two services independently: the Express backend (API + Style Matching Engine) and the Vite frontend (React SPA + Web3). The backend must be started first since the frontend depends on its API endpoints for clothing data and style recommendations:

# Terminal 1: Start the Backend API Servercd servernpm install# Create .env if necessary (see server/.env for reference)npm start

# Terminal 2: Start the Frontend Dev Servernpm installnpm run dev

# Run Backend Unit Tests (Jest + Coverage)cd servernpm test

Testing Strategy

●Jest Unit Tests: Backend test suites in server/tests/ (e.g., Clothing.test.js) validate the Style Matching Engine and data layer with coverage reports.
●Frontend Linting: Run npm run lint to enforce ESLint standards across all React components.
●Container Testing: Verify Docker builds using the included shell scripts to ensure production parity before deployment.