Winnie - Your Wardrobe OS

Architecture diagram with Google stack
Very dense agent diagram, stylized ones are more comprehensible!
1. Digitize your wardrobe
2. Build outfits
3. Optimize your wardrobe
4. Shop consciously

✨ Inspiration ✨

My family runs a second-hand clothing store, and I've spent a lot of time trying to convince people to shop more sustainably and be more conscious about their wardrobes. But believe it or not, it's not just a matter of discipline or willpower. Telling people to simply "shop less" is actually starting from the problem backwards and not helping anyone. 😅

The real challenge is understanding the entire lifecycle of a wardrobe: knowing what you own, using it efficiently, identifying gaps, and only then deciding whether you actually need to buy something.

So I started wondering: what if there was a consumer app that could guide people through the entire wardrobe journey and help them make smarter fashion decisions?

That idea eventually became Winnie!

⚙️ What it does ⚙️

The process begins with digitizing your wardrobe, which is usually the most tedious part. Everyone dreams of having something like the closet in Clueless where you can see all your clothes digitally, but in reality cataloging a wardrobe is difficult. Even in our store, where we have professional lighting and equipment to photograph items, it takes a huge amount of time. At home it's even harder. Most people live in small apartments, don't have good lighting, and can't step far enough back to take proper photos of their clothes.

So Winnie starts with a live AI assistant that digitizes your wardrobe using a multimodal agent powered by Nano Banana. Instead of carefully staging photos, you can simply show the garment to the camera, and the AI reconstructs a clean catalog entry with information like category, color, and style in just a few seconds.

Wardrobe Digitization

Once the wardrobe is digitized, Winnie can help you actually use it.

Instead of staring at a closet wondering what to wear, the system can generate outfits from items you already own.

Behind the scenes, several agents run in parallel to evaluate compatibility and assemble the best combination.

Outfit Generation Agents

Next comes the wardrobe optimizer, which treats your wardrobe as a system and analyzes how you actually use your clothes. This is an agent that runs in the background while you chat with the stylist agent or add things to your wardrobe.

Wardrobe Optimization Agents

Finally, Winnie acts as a shopping companion.

In our store, customers often bring clothes from home to see whether something they want to buy actually matches their wardrobe. Way too often people buy something that later turns out not to fit anything they own.

Winnie solves this problem by comparing new items with your entire wardrobe.

Shopping Assistant Agents

By connecting all these stages together, cataloging, styling, optimizing, and shopping, Winnie becomes more than just a wardrobe app.

It acts as a Wardrobe Operating System, helping people make smarter fashion decisions and consume clothing more consciously.

🛠️ How we built it 🛠️

I originally started building Winnie with the intention that it could eventually become a real mobile app, not just a hackathon prototype.

So instead of building a quick web interface, I went straight for Expo + React Native. That might be slightly overkill for a hackathon project, but I learned that lesson the hard way. My last fashion-related hackathon project (also inspired by my family's store) ended up becoming a real app, and I had to rewrite most of the code from scratch because the original prototype wasn't designed for mobile. This time I wanted to keep my options open.

The result is a mobile-first interface. If you're viewing this demo in a browser, it works best if you switch your browser to mobile view!

The backend is written in Python, mainly because that’s the ecosystem I'm most comfortable building AI workflows in. This is where the agent logic lives.

Everything is deployed on Google Cloud. The backend runs in a container on Cloud Run. The wardrobe data and user state are stored in Firestore.

The infrastructure itself is defined using Terraform, so the entire cloud setup is managed as infrastructure-as-code.

Development also involved a lot of very real-world testing.

On Saturdays I go to a meetup for "cracked coders" where people gather to work on hackathon projects. Because this project involves actual clothing items, I ended up sitting in the corner waving clothes at my webcam while testing the wardrobe digitization agent. It looked pretty ridiculous, but it worked surprisingly well. 😂

I also tested the system at our family store, which gave me access to a huge variety of clothes to experiment with different wardrobe scenarios. Originally I also wanted to test the app with one of my most shopaholic friends to see how she would use it in the wild. We didn't manage to coordinate in time for the hackathon, but that’s definitely one of the next things I want to try!!!

One disclaimer for frontend experts: please don’t read my frontend code too closely. 😅😅

I'm primarily a backend and DevOps person, and the frontend here is very much vibe-coded. It’s probably not the most elegant or efficient codebase in the world, but it does the job lol.

If you want to see how I built it, check out my YouTube series!

🐞 Challenges we ran into 🐞

One of the biggest challenges was the frontend development. I relied entirely on AI coding tools like Antigravity and Gemini CLI to help generate the interface. But translating my design ideas into clear prompts turned out to be harder than expected. 🙃

In the end, I basically became a control freak about the UI and started guiding the agents step by step, asking them to adjust individual buttons, layouts, and visual elements one piece at a time. The result works and looks nice, but it also means the styling code is now verrrry long and not particularly structured. Refactoring that will definitely be an important next step.

Another challenge was building the wardrobe digitization pipeline.

The clothing scan feature requires multiple components to work together: capturing camera input, running multimodal analysis, extracting attributes, generating improved images, and saving structured wardrobe items. Getting all those pieces to work together reliably turned out to be the hardest agent to develop in the system.

Lastly, working with the map component was also quite challenging, I even marked it as beta in the app because it's far from perfect. I initially wanted to make something a little more interactive, but I think this whole task could be a hackathon project in and of itself lol, so I left it as is to not get distracted from the main agent workflow, which was the focus of the hackathon. I'll continue improving it after the hackathon for sure! I have lots of ideas about it, this whole process made me even more excited to continue developing Winnie into a real app!

🏆 Accomplishments that we're proud of 🏆

One thing I'm really proud of is how quickly I was able to build this project end-to-end. Less than a year ago, I participated in my first ever hackathon in April, and at that time things like deployment, infrastructure, and making a project publicly accessible felt intimidating. Since then I've participated in many hackathons and built several projects, and the difference is huge! This time, setting up the stack and deploying, on the contrary, was the easy part!

Thinking about this also made me realize just how far I've come in my developer's journey in general. This past year I've joined developer groups, started a YouTube channel about software engineering, worked across so many things... Goes to show that participating in hackathons isn't just about winning!

This is probably the most end-to-end and comprehensive project I've built for a hackathon so far and I don't plan on stopping here! 😈

🎓 What we learned 🎓

The biggest thing I learned during this project is how much depth there is in agent architecture.

To be completely honest, what I built for this hackathon is probably just the tip of the iceberg. The current system mostly relies on single agents orchestrating different tools and workflows, rather than a fully coordinated multi-agent system described in a lot of these in-depth agent tutorials.

But while building Winnie, I spent a lot of time reading documentation and watching technical talks about agent design patterns. That process really changed how I think about building AI-powered applications. Instead of seeing AI as just a feature you plug into an app, you start thinking about it as a system of cooperating components, each responsible for a specific reasoning task. The videos and technical resources shared by the hackathon and the community were incredibly helpful in understanding these ideas and experimenting with them in practice!

This project made me realize that I've only scratched the surface of what's possible, and it definitely motivated me to keep improving Winnie's architecture and explore more advanced multi-agent designs in the future.

🚀 What's next for Winnie 🚀

The first step is definitely cleaning up the codebase... 🫣

Like many hackathon projects, this was built in a bit of a rush. Some parts are elegant... and some parts are honestly much uglier than I would normally allow... So before anything else, I want to refactor the project and make the architecture cleaner and easier to maintain.

After that, the goal is to turn Winnie into a real mobile app.

Recently I released another app, and that experience taught me a lot about the actual publishing process. Getting an app live involves more than just building it: you need test users, app store configuration, reviews, and all the little details required for Google Play and the App Store.

The good news is that now I’ve already gone through that process once, so this time there will be much less friction.

So the plan is: