DreamCloset

site demo
motion closet

Inspiration We were inspired by a problem we all have: not knowing what to wear. Inspired by Barbie-style dress-up games, we created DreamCloset, a digital version of your real closet that makes planning outfits easier and more fun.

What it does DreamCloset lets users upload their own clothes, automatically remove their backgrounds, and use them to create outfits on a customizable model. It also includes Outfit of the Day, My Colors, Stylist Chat, and a BETA Live Fitting Room that uses body tracking and hand gestures to switch between clothes.

How we built it We built DreamCloset with React, JavaScript, HTML, CSS, and Vite. We used MediaPipe Pose Landmarker for real-time body tracking and wrote JavaScript to recognize hand gestures. We also built automatic background removal for clothing uploads and used Git and GitHub to collaborate.

Challenges we faced Our biggest challenge was the Live Fitting Room. We successfully tracked the user's body and gestures, but making flat 2D clothing realistically fit and move with a person was much harder than expected. We decided to keep this feature in BETA while focusing on making the rest of DreamCloset functional.

What we learned We learned a lot about React, computer vision, image processing, gesture recognition, and GitHub collaboration. Most importantly, we learned how to adapt when an ambitious feature didn't work exactly as planned and still turn our idea into a working project.

What's next We want to improve the Live Fitting Room with more realistic clothing fitting and eventually 3D garments and 360° models. We also want to make the Stylist Chat and outfit recommendations even more personalized.