St-AI-list

Personal wardrobe database and AI stylist.

Comment

Inspiration

As a college student, a lot of times I would find myself with not a whole lot of time (especially in the mornings, when I would be picking out my outfits.) I knew that I didn't have enough time to find a NEW outfit that I liked, so I would just wear the same 2 or 3 outfits over and over again. I would constantly see recommendations or stuff online, but nothing that really fit my wardrobe. That is when we thought of St-AI-list, something that can help suggest some potential outfits for me, given my wardrobe.

What it does

St-AI-list is a digital wardrobe management app that solves the universal problem of staring at a full closet but having "nothing to wear." Users can catalog their clothing items in a personalized digital wardrobe, complete with photos and details, then receive AI-powered outfit recommendations generated by Google's Gemini API based on what they actually own. The app lets you set up a style profile with your sizes and preferences, ensuring suggestions are both practical and personalized. Built with React, TypeScript, and Vite, St-AI-list combines intuitive wardrobe tracking with intelligent styling assistance to help you make the most of your existing wardrobe—no more impulse purchases or outfit decision fatigue.

How we built it

We built St-AI-list using React and TypeScript with Vite handling the build process. The frontend is component-based with separate modules for the wardrobe list, add clothes form, profile settings, and AI stylist interface. We integrated Google's Gemini API to power the AI recommendations - it analyzes your wardrobe data along with your style profile (height, location, preferences, etc.) to suggest complete outfits. The AI can also identify clothing items from text descriptions, automatically filling in details like brand, material, and fit. For data persistence we went with LocalStorage to keep things simple and avoid setting up a backend during the hackathon time crunch. Users can import/export their wardrobe data as JSON, and the app supports image uploads for clothing items using base64 encoding. The whole thing runs client-side and talks directly to the Gemini API.

Challenges we ran into

The biggest challenge was that no one on our team had ANY frontend experience, so we were playing it all by ear. Typescript and its system was also annoying, dealing with type errors slow us down. Integrating the google gemini API was really unfamiliar, and took some getting used to. None of us had used vite before. Dependency errors. Short time frame, made us have to cut out a lot of cool stuff.

Accomplishments that we're proud of

Making a website that uses gemini AI, and has MULTIPLE different integrations of it. Integrating an image generator (its really cool). We made something that we think we will actually use outside of this. Something genuinely pretty useful. Which is really cool and refreshing, and we are proud that it all ended up 100% functional. We went from 0 experience with react and typescript to booting up a fully functional product within the time frame.

What we learned

Vite, React, Typescript, Node.js, all the dependencies, oh the dependences... Crash course in modern web development and AI (API) integration. We learned how to think in components and dataflow rather than procedural programming, working with react. How to RAPIDLY prototype with unfamiliar tools and debug across multiple different technologies we also learned DO NOT PUSH THE API KEY TO GITHUB!!!

What's next for St-AI-List

Originally, I had wanted to do an AI suggester as well, which we had, but it was super unstable so we had to revert to MVP because of time constraints. I will most likely still add that in the future. We also wanted to make it an interactive assistant with speech and speech understanding.

Built With

Share this project:

Updates