███████╗████████╗██╗ ██╗██╗ ███████╗██╗ ██╗ █████╗ ██╗ ██╗██╗ ████████╗
██╔════╝╚══██╔══╝╚██╗ ██╔╝██║ ██╔════╝██║ ██║██╔══██╗██║ ██║██║ ╚══██╔══╝
███████╗ ██║ ╚████╔╝ ██║ █████╗ ██║ ██║███████║██║ ██║██║ ██║
╚════██║ ██║ ╚██╔╝ ██║ ██╔══╝ ╚██╗ ██╔╝██╔══██║██║ ██║██║ ██║
███████║ ██║ ██║ ███████╗███████╗ ╚████╔╝ ██║ ██║╚██████╔╝███████╗██║
╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚═╝
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 │
│ │
└─────────────────────────────────────────────────────────────┘
| 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 |
╔══════════════════╦═══════════════════════════════════════╗
║ 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 ║
╚══════════════════╩═══════════════════════════════════════╝
👗 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
Before you begin, make sure you have:
installed
- A Supabase account (free tier works great!)
or Yarn
git clone https://github.com/your-username/stylevault.git
cd stylevault- Open your Supabase Dashboard
- Go to SQL Editor
- Paste and run the contents of
backend/schema.sql
💡 This creates all required tables:
wardrobe_items,outfits, and more.
cd backend
cp .env.example .envFill 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.envto GitHub. It's already in.gitignore.
cd backend
npm install
npm run dev
# 🟢 Running on http://localhost:5000cd frontend
npm install
npm run dev
# 🎨 Running on http://localhost:5173That's it! Open http://localhost:5173 and start styling. 🎉
POST /api/auth/register → Create a new account
POST /api/auth/login → Login & get JWT token
GET /api/auth/me → Get current user profile
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
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
POST /api/upload → Upload a clothing image
🔑 All routes except
/auth/registerand/auth/loginrequire:Authorization: Bearer <your_jwt_token>
npm run dev # 🔄 Start with hot-reload (nodemon)
npm start # 🚀 Start in production modenpm run dev # ⚡ Start Vite dev server
npm run build # 📦 Build for production
npm run preview # 👀 Preview production build
npm run lint # 🧹 Run ESLint checksFull 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
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
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 ⭐
