OutfitMax 👕

🔗 Live demo

Your AI personal stylist. Upload photos of your clothes to get instant styling feedback, build a searchable digital wardrobe, and generate complete outfits from pieces you already own — powered by Google Gemini vision.

---

Features

• Instant outfit feedback (no login) — upload one or more clothing photos and get an overall rating, what works / what to improve, layering tips, and pairing suggestions with shopping links.
• Digital wardrobe — upload clothing photos (one or many at once) and Gemini automatically tags each item (category, color, material, season, keywords) and files it into your private closet.
• Outfit ideas from your closet — tell it an occasion and get complete outfits assembled only from clothes you own, with a "complete it with…" suggestion for anything missing.
• Accounts & privacy — email/password auth; every user only ever sees their own clothes (enforced by database Row-Level Security and private image storage).

Tech stack

Layer	Choice
Framework	Next.js 16 (App Router) + TypeScript
Styling	Tailwind CSS v4
AI / vision	Google Gemini (gemini-3.6-flash) via @google/genai
Database / Auth / Storage	Supabase (Postgres + Auth + Storage)

The AI layer sits behind a provider-agnostic AIStylist interface (src/lib/ai/), so the underlying model can be swapped without touching the rest of the app.

Architecture

flowchart LR
    Browser(["User's browser"])

    subgraph app["Next.js app (Vercel)"]
        direction TB
        Pages["Pages / SSR<br/>landing · analyze · closet · outfits · profile"]
        Proxy["proxy.ts<br/>refresh session · guard routes"]
        Server["Server Actions<br/>+ /api/analyze"]
        AI["AIStylist interface<br/>→ GeminiStylist"]
    end

    Gemini["Google Gemini<br/>vision + text"]

    subgraph sb["Supabase"]
        direction TB
        Auth["Auth"]
        DB[("Postgres + RLS<br/>garments · profiles")]
        Store["Storage<br/>private images"]
    end

    Browser -->|every request| Proxy
    Browser -->|load page| Pages
    Browser -->|submit form| Server
    Server --> AI
    AI -->|images + prompts| Gemini
    Server -->|scoped by RLS| DB
    Server --> Store
    Proxy --> Auth
    Server --> Auth

• The server holds all secret keys — the browser never sees the Gemini key or the Supabase secret key.
• Styling feedback runs through /api/analyze; wardrobe uploads and outfit suggestions run through Server Actions.
• Clothing images live in a private Supabase Storage bucket and are shown via short-lived signed URLs.

Design decisions

• Provider-agnostic AI layer. All AI access goes through a single AIStylist interface (src/lib/ai/). Swapping Gemini for another model means writing one new class — the rest of the app is untouched — and it makes the AI layer easy to unit-test by mocking the client.
• Schema-validated output + retry/backoff. Every model call requests a strict JSON schema and is parsed/validated; transient 429/503 errors retry with exponential backoff, while real errors fail fast. This is covered by tests.
• Row-Level Security over app-level checks. Each user's wardrobe is isolated at the database layer (RLS policies scoped to auth.uid()), not just in app code — and an integration test proves user A can't read user B's data.
• Private images via signed URLs. Images never live in a public bucket; the server mints short-lived signed URLs only for the owner.
• Outfit suggestions from a text catalog. Instead of re-sending every clothing image, the wardrobe is summarized as a numbered text list; the model references items by number, which is cheaper and makes it impossible to hallucinate clothes the user doesn't own.
• Observability built in. Every AI call logs provider, latency, retry count, and validation outcome (pino), so failures and performance are measurable.

Getting started

Prerequisites

• Node.js 20+ (developed on Node 24)
• A free Supabase project
• A free Google AI Studio API key

1. Install

git clone https://github.com/pranavraju24/outfitmax.git
cd outfitmax
npm install

2. Configure environment variables

Copy the example file and fill in your own values:

cp .env.example .env.local

Variable	Where to find it
GEMINI_API_KEY	Google AI Studio → Create API key
NEXT_PUBLIC_SUPABASE_URL	Supabase → Project Settings → Data API
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY	Supabase → Project Settings → API Keys (publishable)
SUPABASE_SECRET_KEY	Supabase → Project Settings → API Keys (secret)

.env.local is git-ignored — your real keys never get committed.

3. Set up Supabase

1. Database: open the Supabase SQL Editor and run the contents of supabase/schema.sql. This creates the garments and profiles tables with Row-Level Security and the required grants.
2. Storage: create a private bucket named garments (Storage → New bucket → uncheck "Public bucket").
3. Auth (for local dev): Authentication → Sign In / Providers → Email, and turn off "Confirm email" so signups log in immediately. (Re-enable this before going to production.)

4. Run

npm run dev

Open http://localhost:3000.

Run with Docker

The app ships a multi-stage Dockerfile (Next.js standalone output) and a docker-compose.yml. With your env values in .env.local:

docker compose --env-file .env.local up --build

Supabase itself runs separately (your hosted project, or npx supabase start for a local stack).

This is the beginning of the README. Read the rest at the original. Read the full README ↗