DrapeRoom

A 3D virtual fitting room where users upload avatars and clothing, visualize them together in an interactive Three.js scene, and merge/export the result.

Features

• 3D Virtual Fitting Room — Real-time interactive scene with avatar and wearable overlays
• Avatar Management — Switch between preloaded avatars or upload custom .glb models
• Wearable Management — Load preloaded clothing or upload custom .glb wearables with rig validation
• 3D Manipulation — Translate and rotate wearables using TransformControls
• Geometry Merging — Combine avatar + wearables into a single mesh and export as .glb
• Saved Looks — Save merged results and preview/reload them later
• User Authentication — Signup, login, and password reset (bcrypt hashing)
• Landing Page — Marketing page with hero video and call-to-action

Tech Stack

Layer	Technology
Frontend	React 19, TypeScript, Vite
3D Rendering	Three.js, React Three Fiber, React Three Drei
Routing	Wouter
State	Zustand (global), React Query (server)
UI	shadcn/ui, Tailwind CSS v4
Backend	Express.js, Node.js
Database	Drizzle ORM (PostgreSQL planned, JSON file current)
Auth	bcryptjs

Getting Started

Prerequisites

• Node.js 20.11+ (for import.meta.dirname support)
• npm

Installation

cd Virtual-Wardrobe
npm install

Create Environment File

Create a .env file in the Virtual-Wardrobe directory:

PORT=5000
NODE_ENV=development

Run Locally

npm run dev:local

Open http://localhost:5000

Run on Replit

The app auto-detects Replit via REPL_ID and loads Replit-specific plugins. Use:

npm run dev

Scripts

Command	Description
npm run dev	Default dev server (local or Replit)
npm run dev:local	Dev server with explicit PORT=5000
npm run dev:replit	Dev server for Replit environment
npm run dev:client	Client-only Vite dev server
npm run build	Production build (client + server)
npm start	Run production server
npm run start:local	Production server with explicit PORT=5000
npm run check	TypeScript type checking
npm run db:push	Push Drizzle schema to PostgreSQL

Project Structure

Virtual-Wardrobe/
├── client/
│   ├── public/
│   │   ├── assets/
│   │   │   ├── avatars/        # Preloaded avatar models (.glb)
│   │   │   └── wearables/      # Preloaded clothing models (.glb)
│   │   └── videos/             # Hero videos
│   └── src/
│       ├── components/
│       │   ├── scene/          # 3D scene (Experience.tsx)
│       │   └── ui/             # UI components (shadcn/ui + custom)
│       ├── pages/              # Route pages
│       ├── hooks/              # Custom React hooks
│       ├── lib/                # Utilities, query client
│       ├── store.ts            # Zustand global state
│       └── App.tsx             # Router setup
├── server/
│   ├── index.ts                # Express entry point
│   ├── routes.ts               # API routes (/api/auth/*)
│   ├── auth.ts                 # Authentication logic
│   ├── validation.ts           # Input validation
│   ├── vite.ts                 # Vite dev middleware
│   └── static.ts               # Production static serving
├── shared/
│   └── schema.ts               # Drizzle ORM schema + types
├── script/
│   └── build.ts                # Production build script
├── .replit                     # Replit deployment config
├── package.json
├── tsconfig.json
└── vite.config.ts

API Routes

Method	Endpoint	Description
POST	/api/auth/signup	Create new user account
POST	/api/auth/login	Authenticate with username/password
POST	/api/auth/reset-password	Password reset request
GET	/api/auth/me	Get current user
POST	/api/auth/logout	Logout

Environment Variables

Variable	Default	Description
PORT	5000	Server port
NODE_ENV	development	development or production
REPL_ID	(auto)	Replit environment ID (auto-set)
DATABASE_URL	—	PostgreSQL connection string (optional)

License

MIT