Wear or Tear: Is This Fit Hard?

Welcome page
Input style preferences and location
Take or upload a photo to calculate the drip score of your outfit
View your outfit history in your Fit Diary

Inspiration

Have you ever woken up and gotten ready for the day and wondered to yourself "is my fit hard?" Our project "Wear or Tear: Is This Fit Hard" was inspired by this very question. We wanted to build a project that solves this daily problem and gives you feedback on your outfits.

What it does

Wear or Tear is a full-stack web application which allows users to sign into their own unique account and either capture or submit a full body picture and receive feedback on their outfit based on the occasion, weather, and their preferences. Their outfits are then saved into a "Fit Diary" where they can look back at past outfits to take inspiration for their future outfits.

How we built it

We built Wear or Tear using React for front end development, FastAPI for API endpoint development, Supabase as a database, and OpenAI as a GenAI tool. Using Figma to design our front end along with React, we were able to make a simple to use UI which then uses FastAPI to connect to the user login/registration, weather api, Supabase, and OpenAI endpoints to allow the user to get personalized feedback on their outfits.

Challenges we ran into

We ran into a lot of issues trying to implement OpenAI. We had to figure out how to make the model consider multiple factors like weather, occasion, and user preferences while still giving actionable advice. Connecting multiple APIs—OpenAI, the weather API, and Supabase—through FastAPI while maintaining smooth front-end functionality also required careful debugging and testing. Despite these obstacles, we learned a lot about full-stack development and API integration.

Accomplishments that we're proud of

We’re proud of successfully building the backend of Wear or Tear, integrating OpenAI, FastAPI, Supabase, and external APIs to provide personalized outfit feedback. While the frontend wasn’t fully connected, we were able to design the user interface in Figma and plan how it would interact with the backend. Building a working backend in a hackathon environment and tackling API integration challenges was a major achievement for our team.

What we learned

Through building Wear or Tear, we learned how to integrate AI-generated content into a user-facing web application and manage multiple APIs effectively. We gained hands-on experience in full-stack development, from designing the front end to connecting it with back-end endpoints and databases. We also learned the importance of user experience design, as a simple and intuitive interface significantly improves how users interact with the app.

What's next for Wear or Tear: Is This Fit Hard?

In the future, we want to fully connect our frontend to our backend database. We also want to expand the AI’s capabilities to suggest outfit improvements, add more context-aware recommendations based on user style history, and explore creating a mobile-friendly version of the app.