✨ Wardrobe

Your AI-powered personal wardrobe assistant

Catalog your clothes, generate outfit compositions, and virtually try on your wardrobe items — all powered by Google Gemini.

Features • Tech Stack • Getting Started • Deployment

---

🎯 Features

📸 Wardrobe Management

• Smart Categories — Organize items by type: Headwear, Tops, Bottoms, Full Body, Footwear, Accessories
• Image Gallery — Upload photos, mark favorites, filter and browse with pagination
• Quick Search — Find items instantly across your entire wardrobe

🤖 AI-Powered Generation (Pro)

• Outfit Composer — Select items and generate styled outfit compositions
  • Flat-lay or mannequin display modes
  • Gender-specific mannequin styling
• AI Picks — Describe your desired look and let AI create it
  • Style presets: casual, formal, date-night, street, cozy, elegant, sporty
• Virtual Try-On — See how clothes look on you
  • Upload a selfie, overlay any wardrobe item
  • Preserves your face, pose, and background

📁 Organization

• Smart Folders — Group outfits into custom collections
• Favorites — Quick access to your best items and looks

🌍 Internationalization

• English and Portuguese language support

---

🛠 Tech Stack

Next.js 15

TypeScript

Tailwind

Supabase

Gemini AI

Layer	Technology
Framework	Next.js 15 (App Router)
Styling	Tailwind CSS + shadcn/ui + Radix UI
Auth & DB	Supabase (PostgreSQL with RLS)
Storage	Supabase Storage
AI	Google Gemini 3 Pro Image (Nano Banana Pro)
i18n	next-intl

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm 10+
• Supabase account
• Google AI Studio API key

Quick Start

# Clone and install
git clone https://github.com/cgoncalves94/wardrobe-app.git
cd wardrobe-app
pnpm install

# Configure environment
cp .env.local.example .env.local

Add your credentials to .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
GEMINI_API_KEY=your-gemini-api-key

# Start development server
pnpm dev

Open http://localhost:3000 to see the app.

Database Setup

1. Create a new Supabase project
2. Run the SQL from supabase/schema.sql in the SQL Editor
3. This creates all tables, storage buckets, and RLS policies

📋 Database Schema

Table	Purpose
categories	Clothing categories with root types
items	Wardrobe items with images
outfits	Generated outfit/try-on images
outfit_folders	Folder organization
user_selfies	Stored selfies for try-on
user_subscriptions	Subscription tier tracking

All tables have RLS policies for user data isolation.

---

📁 Project Structure

app/
├── (auth)/           # Login flow
├── (main)/           # Protected routes
│   ├── categories/   # Category management
│   ├── items/        # Wardrobe gallery
│   ├── outfits/      # Generation & try-on
│   └── upgrade/      # Pro subscription
└── api/ai/           # AI endpoints

components/           # UI components
lib/
├── categories.ts     # Category definitions
├── features.ts       # Pro feature gating
├── supabase/         # Database clients
├── gemini/           # AI generation
└── images.ts         # Image utilities

messages/             # i18n (en.json, pt.json)

---

📜 Scripts

pnpm dev       # Start dev server (port 3000)
pnpm build     # Production build
pnpm start     # Start production server
pnpm lint      # Run ESLint

---

🌐 Deployment

Service	Platform
Frontend	Vercel (recommended)
Backend	Supabase (hosted)

---

📄 License

MIT © Cesar Goncalves

---

⬆ Back to top