Smart Closet

Smart Closet is a local-first personal wardrobe MVP. It lets you upload clothing photos, save them in a digital closet, review mock AI-generated attributes, edit those attributes manually, and generate simple outfit suggestions from saved items.

The first version intentionally uses no paid APIs or cloud services. The backend includes a clearly separated mock analyzer so OpenAI Vision can be added later without reshaping the rest of the app.

Features

• Upload clothing photos to local /uploads storage.
• Save item name, category, optional brand, and optional notes.
• Generate placeholder clothing attributes through analyze_clothing_image(image_path).
• Store wardrobe data in SQLite.
• Browse wardrobe cards with image, category, colors, formality, season, and tags.
• Filter by category, color, formality, and season.
• Edit AI-detected fields manually.
• Delete wardrobe items and their local image files.
• Resize and compress uploaded JPEG, PNG, and WebP files to local JPEGs.
• Generate three rule-based outfit suggestions.
• Add sample data to an empty wardrobe for quick local testing.

Architecture

smart-closet/
  backend/
    app/
      main.py              FastAPI routes and upload handling
      models.py            SQLAlchemy database model
      database.py          SQLite engine/session setup
      schemas.py           Pydantic request/response schemas
      image_analysis.py    Mock analyzer, future AI integration point
      recommendation.py    Rule-based outfit logic
      uploads/             Local image storage
    tests/                  Basic API tests
    requirements.txt
    README.md
  frontend/
    src/
      api/                 Typed API client
      components/          Shared UI pieces
      pages/               Wardrobe, upload, edit, outfit pages
      App.tsx
      main.tsx
    package.json
    README.md
  README.md

Setup Commands

From the repository root:

cd smart-closet/backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

cd ../frontend
npm install

Run Commands

Run the backend:

cd smart-closet/backend
source .venv/bin/activate
uvicorn app.main:app --reload --host 127.0.0.1 --port 8000

Run the frontend in another terminal:

cd smart-closet/frontend
npm run dev

Open http://localhost:5173. The API is available at http://localhost:8000.

Test Commands

Run backend tests:

cd smart-closet/backend
source .venv/bin/activate
pytest

Run the frontend production build:

cd smart-closet/frontend
npm run build

Demo Workflow

1. Start the backend and frontend with the run commands above.
2. Open the wardrobe page and add sample data if the closet is empty.
3. Upload a JPEG, PNG, or WebP clothing photo with a name and category.
4. Open the saved item, review the mock AI attributes, and edit any incorrect fields.
5. Generate outfit suggestions and review the match score, styling rationale, and possible weakness.
6. Delete a test item from its detail page to confirm local cleanup.

Screenshots

Add current screenshots before publishing the repository:

• docs/screenshots/wardrobe-dashboard.png - wardrobe grid with dashboard summary
• docs/screenshots/upload-item.png - upload form with image preview
• docs/screenshots/edit-item.png - item correction form and delete modal
• docs/screenshots/outfit-recommendations.png - polished outfit recommendation cards

Portfolio Value

This project demonstrates a practical full-stack MVP with:

• A typed React + TypeScript frontend with reusable UI components.
• A FastAPI backend with SQLite persistence and local file storage.
• Safe-enough MVP upload handling with type checks, file size limits, image resizing, and compression.
• A replaceable AI boundary through analyze_clothing_image(image_path).
• Rule-based recommendation logic that returns explainable results instead of opaque scores.
• Manual correction workflows for imperfect automated analysis.
• Focused backend tests for the core user flows.
• Clear local setup and a structure that can grow toward deployment later.

Future OpenAI Vision Integration

Replace the body of backend/app/image_analysis.py::analyze_clothing_image(image_path) with a Vision API call. Keep the function signature and returned JSON shape stable:

{
  "category": "...",
  "dominant_color": "...",
  "secondary_color": "...",
  "pattern": "...",
  "brand": "...",
  "formality": "...",
  "season": "...",
  "style_tags": ["..."]
}

Suggested flow:

1. Read the local image file.
2. Send it to an OpenAI vision-capable model with a schema-constrained prompt.
3. Validate the JSON against the app's allowed values.
4. Fall back to the mock analyzer or safe defaults on API errors.
5. Keep the edit page because AI output will still need human correction.

Limitations

• The analyzer is mock logic, not real image recognition.
• The recommendation engine is simple rule-based scoring.
• Images are stored locally and compressed, but they are not deduplicated.
• Uploads are limited to common raster formats for the MVP. SVG and GIF uploads are intentionally rejected.
• There is no authentication or multi-user support.
• SQLite is appropriate for the MVP, but production deployment should revisit storage, migrations, and backups.
• The frontend has no automated test suite yet.
• The app does not currently include weather, occasion planning, packing lists, or calendar-aware recommendations.

Next Development Steps

• Add migrations with Alembic when the schema starts changing regularly.
• Add real vision analysis behind analyze_clothing_image.
• Add outfit constraints such as occasion and weather.
• Add tests for analyzer fallback and recommendation edge cases.