StyleSync is a modern full stack virtual wardrobe web application that helps users digitally organize clothing collections, upload wardrobe images, receive smart outfit recommendations, and save favourite outfits.
The project is developed using React.js, Node.js, Express.js, MongoDB Atlas, and Cloudinary.
- User Registration and Login
- JWT Authentication
- Password Encryption using bcrypt
- Digital Wardrobe Management
- Clothing Image Upload using Cloudinary
- Smart Outfit Recommendation System
- Favourite Outfit Saving
- Responsive Modern UI
- MongoDB Database Integration
- Protected Backend Routes
- Search and Filtering Functionality
- React.js
- CSS3
- Axios
- React Router DOM
- Node.js
- Express.js
- JWT Authentication
- bcrypt.js
- Multer
- Cloudinary
- MongoDB Atlas
- Mongoose ODM
- Vercel (Frontend)
- Render (Backend)
stylesync/
│
├── client/
│ ├── public/
│ ├── src/
│ │ ├── components/
│ │ ├── context/
│ │ ├── pages/
│ │ ├── utils/
│ │ ├── App.js
│ │ ├── index.js
│ │ └── index.css
│ ├── package.json
│ └── .env
│
├── server/
│ ├── middleware/
│ ├── models/
│ ├── routes/
│ ├── utils/
│ ├── server.js
│ ├── package.json
│ └── .env
│
└── README.md
Allows existing users to securely login using email and password.
Allows new users to create an account.
Displays the main application dashboard and navigation features.
Allows users to upload, manage, search, and filter clothing items.
Generates outfit suggestions based on occasion and weather conditions.
Displays users’ favourite saved outfits.
Handles user registration, login, JWT generation, and protected routes.
Manages wardrobe item uploads, retrieval, deletion, filtering, and favourites.
Implements outfit recommendation logic based on wardrobe data.
Handles cloud-based image upload and storage.
Stores user information and authentication data.
- name
- password
- stylePreferences
- favoriteColors
Stores wardrobe item details.
- user
- name
- category
- color
- occasion
- style
- imageUrl
- isFavorite
Stores favourite outfit combinations.
- user
- items
- occasion
- score
- notes
git clone https://github.com/Harshithamanjunatha/stylesync.gitcd client
npm install
npm startFrontend runs on:
http://localhost:3000
cd server
npm install
npm startBackend runs on:
http://localhost:5000
MONGODB_URI=your_mongodb_atlas_url
JWT_SECRET=your_secret_key
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret| Method | Endpoint | Description |
|---|---|---|
| POST | /api/auth/register | Register new user |
| POST | /api/auth/login | User login |
| GET | /api/auth/me | Get logged user |
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/wardrobe | Get wardrobe items |
| POST | /api/wardrobe | Add wardrobe item |
| DELETE | /api/wardrobe/:id | Delete wardrobe item |
| PATCH | /api/wardrobe/:id/favorite | Toggle favourite |
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/outfits/recommend | Get outfit recommendation |
| GET | /api/outfits/saved | Get saved outfits |
| POST | /api/outfits/save | Save outfit |
- JWT Authentication
- Password hashing using bcrypt salt 12
- Protected backend routes
- Environment variable protection
- Secure Cloudinary uploads
Frontend deployed using Vercel.
Backend deployed using Render.
MongoDB Atlas used for cloud database hosting.
Cloudinary used for cloud image storage.
- Secure User Authentication
- Wardrobe Management
- Image Upload
- Outfit Recommendation
- Favourite Outfit Saving
- Responsive User Interface
- Cloud Database Integration
- AI-based outfit recommendation
- Weather API integration
- Fashion trend analysis
- Mobile application support
- Dark mode UI
- Drag-and-drop wardrobe organization
Harshitha Manjunath
This project is developed for academic and educational purposes.