Fit Check

Inspiration

We've all woken up, thrown an outfit together, and wondered: Does this fit eat? We've also thought, is this even the vibe I'm going for? How could I change it? Our teams solution was 'Fit Check'!

What it does

Fit Check takes your OOTD and rates it on a scale of 1 to 5 based on how well you hit the target on the vibe you were going for. Additionally, you get advice based on the weather: It's cold! Put on a jacket! But of course, It's not enough to just get your fit checked. You also have access to your OOTD history! See how different your outfits were day to day.

Fit Check also provides a social aspect to check out your friends OOTD's, give them your own personal rating, and the ability to comment your thoughts.

How we built it

Backend: A Node.js API with JWT-based login and sign up, backed by a hosted Postgres database on Tiger Data. When you upload your OOTD, the backend sends the photo to the Gemini API, which classifies the outfit's style, rates it, and explains its rating. We prompted Gemini to return broad, recognizable style names (streetwear, preppy, goth) instead of overly specific made-up labels, so styles stay consistent across your history. We also utilized a built-in weather module from React.js

Frontend: The front end started as a React app with routing, which let us split the work into separate pages: a landing page, login and sign up, a dashboard for snapping your fit, a discovery page for exploring styles, your friends' OOTDs, and your OOTD history. We built the pages in parallel on separate branches, then merged them into one cohesive app.

Challenges we ran into

Merging parallel work. Building pages on separate branches meant lots of merge conflicts, and a clean merge didn't always mean working code, so we had to test + debug after every merge.
Getting consistent AI output. Left on its own, Gemini described outfits in creative one-off labels. We had to tune the prompt and clean up the responses so style names were simple, comparable, and familiar to the user
Setup across the whole stack. Between the shared database, API keys, and separate .env files for each part of the app, getting everyone's machine running took more work than expected. We should have containerized it from the start

Accomplishments that we're proud of

It was the front-end team's first time working with React.js and front-end development in general.
A full working loop: take a photo, get an AI rating and weather advice, and see it saved in your history.
A social layer on top of the rating, so Fit Check is something you use with friends.
The effort and teamwork we put in together considering our minimal experience.

What we learned

Version control is hard. We also learned how to work with React and routing, and how much of working with an AI API is prompt design and handling the response.
Debugging with running scripts and adjusting for portability amongst ourselves because we all use different OSs.
How to host a backend site and navigate and gaining comfortability with the Azure ecosystem.

What's next for Fit Check

The next step for fit check is enhanced security and a more immersive experience with referrals to users similar to your style. Along with a direct messaging feature and matching system.