ClosetAI

Inspiration

ClosetAI came from a pretty relatable problem. We all had days where we would stare at a closet packed with clothes and still have no idea what to wear. Somehow, we kept cycling through the same few outfits while forgetting about half the stuff we already owned.

While brainstorming an idea for JamHacks. We found that this was a prominent issue for our peers and us. That got us thinking about an easier way to keep track of our clothes and getting outfit ideas without buying anything new. We wanted to build something that helps people make better use of what they already have, takes some of the stress out of getting dressed every day, and helps them look nicer.

What it does

ClosetAI lets users take pictures of their clothes and add them to a digital wardrobe. The app organizes clothing into tops, bottoms, and shoes, and adds adjustable details like colour, style, occasion, and whether the item is clean or worn.

From there, ClosetAI can recommend a full outfit using one top, one bottom, and one pair of shoes. It tries to choose pieces that make sense together based on the occasion, colour, style, formality, and what the user has worn recently, or the preferences the user has selected. Users can also like, dislike, or mark outfits as worn, which helps the app make better suggestions later.

Alongside these features, ClosetAI can be used to improve your wardrobe by recommending new clothes that would increase the number of good outfits. These are highly personalized and change depending on what the user likes/dislikes.

How we built it

To build ClosetAI, we first designed a system where users could upload photos of clothing and organize them into a digital wardrobe. We created features for categorizing items, tracking whether clothes are clean or worn, storing outfit history, and saving user preferences.

To support those features, we used Expo and React Native for the frontend, Firebase Authentication for user accounts, Firestore for storing wardrobe data, and Cloudinary for image storage.

We then built the clothing analysis workflow, where uploaded images are processed and tagged with details such as category, colour, style, formality, and occasion using AI. Users can review and edit these details before saving them to their wardrobe.

The core of the app is the outfit recommendation engine. We developed a scoring system that compares clothing items based on colour compatibility, style, formality, occasion, outfit history, and user feedback to generate complete outfits. We also integrated Tavily to recommend clothing items from Canadian retailers that would complement a user's existing wardrobe.

Challenges we ran into

One of the hardest parts was making the outfit generator actually feel smart. Picking random clothes is easy, but making an outfit that looks like something someone would actually wear is harder. We had to think about colour matching, formality, style, occasion, and repeated outfits.

Probably the biggest challenge we faced was working with APIs. Since we were relying on free trials and free usage tiers, we ended up using multiple different API providers throughout development. We constantly had to monitor our usage limits, switch between services when credits ran out, and create new accounts to get fresh API keys once we reached the free limits. This made development much more complicated because things would randomly stop working, as an API key would hit its limit.

Another challenge was making sure the app still worked even when the AI was not perfect. Sometimes AI can misread a clothing item, so we made it possible for users to edit the details themselves before saving.

We also had to connect a lot of parts together, like accounts, image uploads, wardrobe items, filters, outfit history, and recommendations. Getting everything to work together smoothly was harder than we expected.

Accomplishments that we're proud of

We are proud that ClosetAI is not just a place to store clothing pictures. It actually helps users decide what to wear and makes use of the clothes they already own.

We are also proud of the outfit recommendation system because it gives a reason for why an outfit works instead of just showing random items. The clean/worn system, outfit history, filters, and wardrobe layout also make the app feel more realistic.

What we learned

We learned a lot about building a full-stack app that uses real services instead of only local data. We worked with Expo, React Native, Firebase Authentication, Firestore, Cloudinary, Cloudflare Workers AI, Tavily, and API-based product search.

We also learned that adding AI is not enough by itself. The app still needs good logic, clean design, editable results, and fallback systems. A useful AI app should help the user make better decisions, not take away their control.

The biggest lesson was that the best features are the ones that solve the actual problem. For ClosetAI, that meant focusing on outfit recommendations, wardrobe organization, clean/worn tracking, and personalized shopping suggestions instead of adding features just to make the app look bigger.

Finally, we learned the value of quality over quantity. We thought about adding a plethora of other features, but they wouldn't be polished and would make the app/website a jumble of half-finished products instead of refined and seamless.

What's next for ClosetAI

Our next goal is to create a fully interactive 3D wardrobe experience. Instead of displaying clothing as simple images, we want each clothing item to be represented as a realistic 3D model and placed inside a virtual wardrobe where garments hang naturally on hangers with realistic physics and movement.

We also want to significantly improve the outfit visualization system. Rather than showing generated images on a generic mannequin, users would be able to create a personalized 3D avatar based on their own body shape. Outfit recommendations could then be viewed directly on their avatar, making it easier to understand how different clothing combinations might look in real life.

Finally, we plan to expand ClosetAI beyond tops, bottoms, and shoes by adding support for accessories such as glasses, belts, chains, and other fashion items. Combined with interactive 360-degree viewing and a fully navigable 3D model, this would create a much more immersive and realistic wardrobe-planning experience.

Built With

• cloudflare
• cloudinary
• expo.io
• firebase
• git
• github
• multer
• node.js
• react
• reactnative
• tavily
• typescript
• zod