👗 OOTDlier – Your Wardrobe’s New Stylist

An intelligent, rule-based outfit generator for curated, confident styling. Built for people who want to look good using what they already own.

---

🌍 Overview

OOTDlier (a play on “OOTD” + “Atelier”) is a fashion assistant web app designed to help users generate curated outfits based on the items in their own closet. Whether you're rushing to a spontaneous party, heading to a business meeting, or just trying to break out of your hoodie–jeans routine — OOTDlier helps you look intentional without overthinking.

Rather than relying on AI or vast fashion catalogs, OOTDlier is built on handcrafted styling logic inspired by real-world fashion theory: silhouette balance, color harmony, texture contrast, and occasion-based dressing.

Designed with a scrapbook-meets-digital minimalism aesthetic, the app lets users either upload their own clothing photos or try out a preloaded closet of items categorized by gender expression and styling purpose.

---

🧭 United Nations Sustainable Development Goal (SDG) Addressed

SDG 12 – Responsible Consumption and Production Fast fashion and impulsive shopping often lead to waste, overspending, and underutilized wardrobes. OOTDlier promotes:

• Sustainable fashion habits by encouraging users to style what they already own
• Minimal wardrobe, maximum creativity — showcasing how fewer items can generate many looks
• Smart purchasing decisions by revealing style gaps rather than pushing new trends

The app empowers users to make intentional and confident style decisions — reducing overconsumption and helping people dress better with less.

---

✨ Features

• 🎨 Curated 3-Piece Styling – Each outfit includes a top, bottom, and shoes based on filtered logic.
• 💼 Occasion Mode – Choose from Casual, Business, or Date styles.
• 📸 Upload Your Own Closet – Add clothing photos from your device or camera.
• 🧠 Rule-Based Generator – Styling logic includes:
  • Base vs. statement piece balance
  • Color harmony (monochrome, complementary, neutral anchoring)
  • Texture contrast (denim + satin, cotton + leather)
  • Silhouette balancing (tight + loose, structured + flowy)
• 📂 Try a Demo Closet – Use preloaded outfits with distinct gender styling

- 🖼️ Outfit Display – Generated outfits are presented vertically like a cut-and-paste style journal.

🛠️ Technical Details

Tech Stack

• Frontend: HTML, CSS, JavaScript (Vanilla)
• Design: Figma (Scrapbook x Minimalist aesthetic)
• Data Handling: In-memory JS-based clothing item storage (JSON-like object format)
• No AI or server backend — built entirely as a client-side app for speed and transparency. ### Key Logic
• ImageManager class tracks uploaded or default closet items
• Filtering functions select items by gender, type, and occasion
• generateOutfit() applies multiple rules and scores outfits based on:
  • Vibe balance (base + statement)
  • Texture diversity
  • Silhouette matching (tight vs. loose)
  • Tone harmony (neutral + bold balance)

- displayVerticalOutfit() renders the styled outfit in the UI

🧩 Known Limitations / Future Improvements

• ❌ Background removal on uploaded images not yet automated
• ❌ No persistent closet (closet resets on page refresh)
• 🚧 Future: Allow users to favorite, save, and rate outfits
• 🚧 Future: Smart closet analytics to suggest purchase priorities

- 🚧 Optional AI integration: Computer vision for auto-tagging uploads

🙋 Solo Developer

This project was designed and built in under 48 hours by a solo developer as part of a hackathon.

Special focus was placed on clarity, utility, and aesthetic storytelling, rather than chasing complexity.

💬 Closing Thought

Fashion doesn’t need to be overwhelming — or wasteful.
OOTDlier helps you style with what you already have, so you can show up confident, creative, and conscious every day.

Built With

• css
• figma
• html
• javascript
• json