FASTFIT

A Chrome extension that enables virtual try-on of clothing items using Google Gemini Nano Banana. Users can try on clothes from Amazon and see how they look before purchasing.

Features

• Virtual try-on using AI image generation
• User profile with measurements and photos
• BYOK (Bring Your Own Key) support - use your own Gemini API key
• Privacy-first (local storage for user data)

Project Structure

This repository contains:

• extension/ - Chrome extension (TypeScript + React)
• backend/ - Backend API (Node.js + Express, currently not required for BYOK mode)

Getting Started

Prerequisites

• Bun (install from https://bun.sh)
• Chrome browser (for testing the extension)
• Google Gemini API key (required for BYOK mode)
• PostgreSQL (optional, only needed if using backend features)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd fastfit

2. Install dependencies:

   bun install

   This will install dependencies for the project. The extension now includes its own local type definitions and does not require a separate shared workspace.

3. Set up environment variables (optional):

   Create .env files if you need to configure the backend:

   Root .env (optional):

   NODE_ENV=development
   API_URL=http://localhost:3000

   Extension .env (optional):

   VITE_API_URL=http://localhost:3000

   Backend .env (optional, only if using backend):

   PORT=3000
   NODE_ENV=development
   API_URL=http://localhost:3000
   GEMINI_API_KEY=your_gemini_api_key_here
   DATABASE_URL=postgresql://user:password@localhost:5432/fastfit
   CORS_ORIGIN=*

4. Set up the database (optional, only if using backend):

   cd backend
   bunx prisma generate
   bunx prisma migrate dev --name init
   cd ..

Development

Extension Development

1. Build the extension in watch mode:

   bun run dev:extension

   This will watch for changes and rebuild automatically.

2. Load the extension in Chrome:

   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode" (toggle in top right)
   • Click "Load unpacked"
   • Select the extension/dist/ directory
   • The extension should now appear in your extensions list

3. Reload after changes:

   • After making changes, the extension will rebuild automatically (if using dev:extension)
   • In chrome://extensions/, click the reload icon on your extension card

Backend Development

Note: The backend is not required for BYOK mode and is currently a placeholder for future features. You can ignore this unless you plan to add server-side features.

Run backend in development mode:

bun run dev:backend

The backend runs on http://localhost:3000 by default.

Testing the Extension

Initial Setup

1. Build the extension:

   bun run build:extension

2. Load the extension in Chrome:

   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the extension/dist/ folder

3. Configure your API key:

   • Click the extension icon in the Chrome toolbar
   • Enter your Google Gemini API key in the settings
   • Save your user profile (measurements and photos)

Testing the Try-On Feature

1. Navigate to an Amazon product page:

   • Go to any Amazon clothing product page (e.g., https://www.amazon.com/dp/PRODUCT_ID)
   • The extension will automatically detect the product page

2. Use the Try-On button:

   • Look for the "Try On" button on the product page
   • Click it to generate a virtual try-on image
   • Wait for the AI image generation to complete
   • View the result in the modal or overlay

3. Check for errors:

   • Open Chrome DevTools (F12)
   • Check the Console tab for any errors
   • Check the Network tab for API calls

Troubleshooting

• Extension won't load: Verify all files are in extension/dist/ and manifest.json is valid
• Try-On button not appearing: Check browser console for errors, verify you're on a supported Amazon domain
• API errors: Verify your Gemini API key is correct and has sufficient quota
• Build errors: Run bun install in the extension directory and rebuild

Building

Build Extension

bun run build:extension

Note: Make sure to build the shared package first: bun run build:shared

Build Extension

bun run build:extension

Build Backend

bun run build:backend

Build All

bun run build:all

• Backend API is optional and minimal (not used by default)

Tech Stack

• Extension: TypeScript, React, Vite, Chrome Manifest V3
• Backend: Node.js, Express, Prisma, PostgreSQL (optional for BYOK mode)
• AI: Google Gemini API (BYOK - Bring Your Own Key)
• Build Tool: Bun

License

MIT