threaded.

An AI-powered premium fashion marketplace, discovery feed, and virtual try-on studio. threaded. uses advanced AI to parse your fashion queries, generate virtual try-ons, and intelligently match you directly with retailer links.

🌟 Key Features

• AI Marketplace: Buy, sell, and trade clothing. Features user authentication, image uploads, and real-time messaging.
• Virtual Try-On Studio: Upload a photo of a clothing item and a photo of a person to instantly visualize how the clothing fits, powered by Emergent LLM.
• Smart Fashion Search: Uses Google Gemini to optimize natural-language fashion queries (e.g., "vintage green summer dress") into actionable product searches.
• Direct Retailer Linking: Bypasses Google Shopping portals to find and redirect users directly to the actual store selling the item via SerpAPI.
• Inspiration & Trends: Pulls trending fashion articles from top Substack creators and visualizes trending styles.

🛠️ Technology Stack

• Frontend: React, Vite, Tailwind CSS, React Router, Axios
• Backend: Node.js, Express
• Database: Local JSON persistence
• AI & External APIs:
  • Google Gemini API (Query optimization, Vision analysis)
  • SerpAPI (Google Shopping Immersive product search)
  • Emergent LLM (Virtual Try-On Generation)

💻 Local Setup

1. Clone the repository:

   git clone <repository_url>
   cd clothing-hub

2. Backend Setup:

   cd backend
   npm install

   Create a .env file in the backend/ directory:

   # Gemini API Key from https://aistudio.google.com/apikey
   GEMINI_API_KEY=your_gemini_key
   
   # SerpAPI key from https://serpapi.com
   SERPAPI_API_KEY=your_serpapi_key
   
   # Emergent LLM key for AI image generation
   EMERGENT_LLM_KEY=your_emergent_key
   
   PORT=5001
   NODE_ENV=development

   Start the backend server:

   npm start

3. Frontend Setup:

   cd ../frontend
   npm install
   npm run dev

   The site will be available at http://localhost:5173/.

🚀 Deployment (Ubuntu VPS / Vultr)

The application is configured to run on a standard Linux VPS using PM2 and Nginx.

1. Build the Frontend

cd frontend
npm run build

Copy the dist/ directory to your web root (e.g., /var/www/clothing-hub/frontend/dist).

2. Run the Backend with PM2

cd backend
npm install
pm2 start server.js --name "clothing-backend"
pm2 save
pm2 startup

3. Nginx Configuration

Nginx is used to serve the static frontend and act as a reverse proxy for the backend API. Note: We increased the client_max_body_size to 50M to allow for Base64 image uploads in the marketplace.

Example /etc/nginx/sites-available/clothing-hub configuration:

server {
    listen 80;
    server_name _;
    
    # Crucial for Marketplace photo uploads!
    client_max_body_size 50M;

    root /var/www/clothing-hub/frontend/dist;
    index index.html;

    # Frontend Routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Backend Proxy
    location /api/ {
        proxy_pass http://localhost:5001/api/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Enable the site and restart Nginx:

ln -s /etc/nginx/sites-available/clothing-hub /etc/nginx/sites-enabled/
nginx -t
systemctl restart nginx

Make sure port 80 is allowed through your firewall (ufw allow 'Nginx Full').

🧹 Managing Data

User accounts, posts, and messages are stored inside the backend/ directory in JSON format. To factory-reset the application data, clear the contents of these files with an empty array:

[]

• marketplace-messages.json
• marketplace-posts.json
• marketplace-users.json