Transform your wardrobe management with AI-powered outfit recommendations and style analytics
- About
- Features
- Demo
- Tech Stack
- Getting Started
- Project Structure
- Usage
- API Documentation
- Roadmap
- Contributing
- License
- Contact
- Acknowledgments
StyleVault is a modern digital wardrobe management application that helps users organize their clothing, create outfits, and receive AI-powered style recommendations. Built with performance and user experience in mind, it offers a seamless way to digitize and optimize your wardrobe.
- Zero Dependencies - Pure vanilla JavaScript implementation
- Offline First - Works without internet connection using LocalStorage
- Mobile Responsive - Optimized for all devices
- AI-Powered - Smart outfit suggestions based on your style profile
- Privacy Focused - All data stored locally on your device
| Feature | Description | Status |
|---|---|---|
| 📦 Digital Closet | Organize and categorize all clothing items | ✅ Complete |
| 👗 Outfit Builder | Mix and match items to create perfect outfits | ✅ Complete |
| 🤖 Style AI | Personalized recommendations based on your wardrobe | ✅ Complete |
| 📊 Analytics Dashboard | Insights into your wardrobe composition | ✅ Complete |
| 💾 Persistent Storage | LocalStorage for offline functionality | ✅ Complete |
| 📱 Responsive Design | Mobile-first approach | ✅ Complete |
| 🎨 Dark Theme | Modern UI with gradient accents | ✅ Complete |
- 📸 Photo upload for clothing items
- 🌤️ Weather-based outfit suggestions
- 🛍️ Shopping integration
- 👥 Social sharing
- 🎭 3D avatar try-on
No authentication required - data stored locally in your browser
- HTML5 - Semantic markup
- CSS3 - Modern styling with CSS Grid & Flexbox
- JavaScript ES6+ - No framework dependencies
- Color Palette: Dark theme with gradient accents
- Typography: Bebas Neue (Display), Work Sans (Body)
- Icons: Native emoji for universal support
- Animations: CSS transitions and keyframes
- LocalStorage API - Client-side data persistence
- JSON - Data serialization
- Modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
- Local web server (optional, for development)
- Git (for version control)
-
Clone the repository
git clone https://github.com/Shay-7278/LookingGlass.git cd LookingGlass -
Open directly in browser
# For macOS open index.html # For Windows start index.html # For Linux xdg-open index.html
-
Or use a local server (recommended)
# Using Python python -m http.server 8000 # Using Node.js npx serve # Using VS Code Live Server # Install Live Server extension and right-click index.html → "Open with Live Server"
-
Access the application
http://localhost:8000
LookingGlass/
│
├── 📄 index.html # Entry point
├── 📁 assets/
│ ├── 📁 css/
│ │ ├── 📄 main.css # Main styles
│ │ ├── 📄 components.css # Component styles
│ │ └── 📄 utilities.css # Utility classes
│ ├── 📁 js/
│ │ ├── 📄 app.js # Main application logic
│ │ ├── 📄 closet.js # Closet module
│ │ ├── 📄 outfits.js # Outfit builder module
│ │ ├── 📄 analytics.js # Analytics module
│ │ ├── 📄 ai.js # AI suggestions module
│ │ └── 📄 storage.js # Storage utilities
│ └── 📁 images/
│ └── 📄 logo.svg # Application logo
├── 📄 README.md # Documentation
├── 📄 LICENSE # MIT License
├── 📄 .gitignore # Git ignore rules
└── 📄 package.json # Project metadata
// Example: Adding a new item programmatically
const newItem = {
name: 'White T-Shirt',
category: 'tops',
color: '#ffffff',
brand: 'Uniqlo',
season: 'all',
icon: '👕'
};
closetModule.addItem(newItem);- Navigate to the Outfits tab
- Select items from each category
- Click Save Outfit to store the combination
- View saved outfits in the Saved tab
The analytics dashboard provides:
- Total items count
- Favorite category analysis
- Color distribution charts
- Style profile generation
// Storage methods
Storage.saveItem(item) // Save single item
Storage.getItems() // Get all items
Storage.deleteItem(id) // Delete item by ID
Storage.saveOutfit(outfit) // Save outfit combination
Storage.getOutfits() // Get all saved outfits// AI suggestion methods
AI.generateSuggestions() // Generate outfit suggestions
AI.analyzeStyle() // Analyze user's style profile
AI.getColorPalette() // Get recommended colors
AI.getSeasonalOutfits() // Get season-appropriate outfits- Basic closet functionality
- Outfit builder
- Local storage
- Analytics dashboard
- AI suggestions
- Photo upload capability
- Clothing item search
- Advanced filtering
- Export/Import data
- PWA support
- User accounts
- Social sharing
- Shopping integration
- Price tracking
- Wishlist feature
- 3D avatar integration
- Virtual try-on
- Weather API integration
- Trend analysis
- Personalized shopping recommendations
Contributions are what make the open source community amazing! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Use meaningful variable names
- Comment complex logic
- Follow ES6+ conventions
- Maintain consistent indentation (2 spaces)
- Write descriptive commit messages
Use the issue tracker to report bugs. Include:
- Browser version
- Steps to reproduce
- Expected behavior
- Actual behavior
- Screenshots (if applicable)
Distributed under the MIT License. See LICENSE file for more information.
MIT License
Copyright (c) 2024 StyleVault
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...
Shay - @Shay-7278
Project Link: https://github.com/Shay-7278/LookingGlass
- Google Fonts - Typography
- Shields.io - README badges
- Choose a License - License selection
- Emoji Unicode - Icon system
- Community contributors and testers
Made with ❤️ by the StyleVault Team
Back to top ⬆️
Back to top ⬆️