███████╗████████╗██╗   ██╗██╗     ███████╗██╗   ██╗ █████╗ ██╗   ██╗██╗  ████████╗
██╔════╝╚══██╔══╝╚██╗ ██╔╝██║     ██╔════╝██║   ██║██╔══██╗██║   ██║██║  ╚══██╔══╝
███████╗   ██║    ╚████╔╝ ██║     █████╗  ██║   ██║███████║██║   ██║██║     ██║   
╚════██║   ██║     ╚██╔╝  ██║     ██╔══╝  ╚██╗ ██╔╝██╔══██║██║   ██║██║     ██║   
███████║   ██║      ██║   ███████╗███████╗ ╚████╔╝ ██║  ██║╚██████╔╝███████╗██║   
╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚══════╝  ╚═══╝  ╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚═╝   

Your wardrobe. Curated. Digitized. Elevated.

🚀 Live Demo · 🐛 Report Bug · ✨ Request Feature

---

🌟 What is StyleVault?

Ever stood in front of your wardrobe thinking "I have nothing to wear" — with a closet full of clothes?

StyleVault solves that. It's a full-stack wardrobe management app that lets you digitize every clothing item you own, create outfit combinations, and finally take control of your personal style.

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│   📷 Upload    →    👗 Organize    →    ✨ Style            │
│                                                             │
│   Snap your       Tag by type,        Mix & match          │
│   clothes         color & season      saved outfits         │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

✨ Features

Feature	Description
📷 Photo Upload	Upload images of every clothing item in your wardrobe
🗂️ Smart Organization	Categorize by type, color, season, and occasion
👗 Outfit Builder	Mix and match items to create and save complete outfits
🔐 Secure Auth	JWT-powered authentication via Supabase
☁️ Cloud Storage	All images and data stored securely in the cloud
📱 Responsive Design	Looks stunning on desktop, tablet, and mobile
⚡ Blazing Fast	Built with Vite for lightning-quick load times

---

🛠️ Tech Stack

╔══════════════════╦═══════════════════════════════════════╗
║    LAYER         ║    TECHNOLOGY                         ║
╠══════════════════╬═══════════════════════════════════════╣
║  🎨 Frontend     ║  React 18 + Vite                      ║
║  ⚙️  Backend      ║  Node.js + Express                    ║
║  🗄️  Database     ║  Supabase (PostgreSQL)                ║
║  🔐 Auth         ║  Supabase Auth + JWT Middleware        ║
║  🖼️  File Upload  ║  Multer + Supabase Storage            ║
║  🧹 Linting      ║  ESLint                               ║
╚══════════════════╩═══════════════════════════════════════╝

---

📁 Project Structure

👗 stylevault/
│
├── 🖥️  backend/
│   └── src/
│       ├── 🔒 middleware/
│       │   └── auth.js           ← JWT token verification
│       ├── 🛣️  routes/
│       │   ├── auth.js           ← Register, login, session
│       │   ├── outfits.js        ← Create & manage outfits
│       │   ├── upload.js         ← Image upload handler
│       │   └── wardrobe.js       ← Clothing item CRUD
│       ├── index.js              ← Express entry point
│       └── supabase.js           ← Supabase client setup
│   ├── .env.example              ← Environment variable template
│   ├── schema.sql                ← Full database schema
│   └── package.json
│
├── 🎨 frontend/
│   ├── src/                      ← React components & pages
│   ├── public/
│   │   ├── favicon.svg
│   │   └── icons.svg
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
│
├── 📄 DEPLOY.md                  ← Deployment guide
├── 📄 README.md                  ← You are here!
└── 🔧 eslint.config.js

---

🚀 Quick Start

Prerequisites

Before you begin, make sure you have:

• installed
• A Supabase account (free tier works great!)
• or Yarn

Step 1 — Clone the repo

git clone https://github.com/your-username/stylevault.git
cd stylevault

Step 2 — Set up the database

1. Open your Supabase Dashboard
2. Go to SQL Editor
3. Paste and run the contents of backend/schema.sql

💡 This creates all required tables: wardrobe_items, outfits, and more.

Step 3 — Configure environment variables

cd backend
cp .env.example .env

Fill in your .env:

# Server
PORT=5000

# Supabase
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key-here
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here

# Auth
JWT_SECRET=your-super-secret-jwt-key

⚠️ Never push your .env to GitHub. It's already in .gitignore.

Step 4 — Start the backend

cd backend
npm install
npm run dev
# 🟢 Running on http://localhost:5000

Step 5 — Start the frontend

cd frontend
npm install
npm run dev
# 🎨 Running on http://localhost:5173

That's it! Open http://localhost:5173 and start styling. 🎉

---

🔌 API Reference

🔐 Authentication /api/auth

POST   /api/auth/register    →  Create a new account
POST   /api/auth/login       →  Login & get JWT token
GET    /api/auth/me          →  Get current user profile

👕 Wardrobe /api/wardrobe

GET    /api/wardrobe         →  Fetch all clothing items
POST   /api/wardrobe         →  Add a new item
PUT    /api/wardrobe/:id     →  Update an item
DELETE /api/wardrobe/:id     →  Remove an item

👗 Outfits /api/outfits

GET    /api/outfits          →  Fetch all saved outfits
POST   /api/outfits          →  Create a new outfit
PUT    /api/outfits/:id      →  Update an outfit
DELETE /api/outfits/:id      →  Delete an outfit

📷 Upload /api/upload

POST   /api/upload           →  Upload a clothing image

🔑 All routes except /auth/register and /auth/login require:

Authorization: Bearer <your_jwt_token>

---

📜 Available Scripts

Backend

npm run dev      # 🔄 Start with hot-reload (nodemon)
npm start        # 🚀 Start in production mode

Frontend

npm run dev      # ⚡ Start Vite dev server
npm run build    # 📦 Build for production
npm run preview  # 👀 Preview production build
npm run lint     # 🧹 Run ESLint checks

---

🌐 Deployment

Full deployment instructions are in DEPLOY.md, including:

• 🚂 Backend → Railway / Render / Fly.io
• ▲ Frontend → Vercel / Netlify
• 🔧 Environment → Production env variables setup
• 🪣 Storage → Supabase Storage bucket configuration

---

🤝 Contributing

Contributions are what make the open source community amazing. Any contributions you make are greatly appreciated!

1. 🍴  Fork the project
2. 🌿  Create your branch   →  git checkout -b feature/AmazingFeature
3. 💾  Commit your changes  →  git commit -m 'Add: some AmazingFeature'
4. 📤  Push to the branch   →  git push origin feature/AmazingFeature
5. 🔁  Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Built with passion for fashion & clean code 👗⚡

If you found this useful, please consider giving it a ⭐