FashionFlipped

Inspiration

At the moment, the fashion industry is a mess. In terms of sustainability, 20% of Global Waste Water comes from textile dyeing according to the UN Environmental Program. Furthermore, 85% of textiles are thrown away or dumped into landfills, including completely unused clothing. However, one major concern is that the fact 60% of clothing does not even have the ability to be recycled.

One of the other major issues is costs in order to remain sustainable. For the most part, buying sustainable clothes means paying a premium, which makes it hard for most people to afford. Sustainable clothing is not affordable. On top of that, Fast Fashion higher costs due to extremely fast turn around times, further reinforcing unsustainable fashion. Getting cheap sustainable clothing is hard by itself, forget trendy clothing due to current fast fashion.

In consideration of all of these issues brought us to create a sustainable solution: Fashion Flipped or F^2. Our product is based on the concept of up cycling previous clothing in order to match up and coming trends, while keeping costs low with reused clothing. A network of vendors are asked on application basis to present their creative portfolio, who then design new clothing for consumers. On the consumer end, a subscription based fee is charged and following a quick survey, our algorithm is able to determine the preferences of the user. Based on our inventory of vendor received up cycled clothing, we present the user monthly a customized box of outfits depending on the selected tier level. At the end of the month, the clothing is returned and a new box of outfits is provided.

What it does

For our UI, we use MUI library to help with UI creation and component creation. For our authentication, you can go ahead and press the login in button to trigger the popup to sign in with 0Auth. Following your login, you will be prompted with a new user navigation at the top. You can go ahead and start off by going to your profile to select some pieces of clothing that you would like. After completing this quiz, the algorithm will have calculated and stored your preferences in Convex.

The algorithm uses OpenAI's ML model to test data minimizing real design preference decision making. After each profile question is answered, the data is stored in Convex in a profile and is then later rendered for customization. Using the average score, the customization algorithm will index the database for closest scores.

For Stripe, using secure form fields, the UI passes a payment token along with user to the Vercel server which then talks directly to Stripe for the transaction. At the moment, we are facing some Stripe deployment issues to the production website so please check out the live demo during judging if you are interested.

How we built it

FashionFlipped is built using convex, a serverless backend, Auth0 for authentication, and a React.JS frontend. The dataset of clothing items was prefilled using OpenAI's CLIP machine learning model using test data through a process that mimics the way real designs would be input. From there, we use custom convex functions to build a profile of the user's style by averaging preferred styles selected during onboarding. Another set of convex functions calculates the cosine similarity between the user's style profile and the other clothing items to pick out an assortment of clothes users are comfortable with while introducing new styles.

Primary Features

Auth0 Authentication
Convex (Serverless Backend), populating with users
Our Clothing Customization ML Model/Algorithm, populating average ratings in results in Convex
Stripe API for payment transactions
Vendor Registration, populating users in Convex
React-Routing for passing through screens and sending data through screens

Challenges we ran into

After experimenting with larger datasets we figured out convex has a strict memory limit. The combination of intense runtime calculations and large dataset rows due to the CLIP features meant we easily hit the limit. This prevented us from demoing the larger dataset but did push us to build more efficient operations by sharing the computing between the client and server.

Another challenge we encountered was the usage of a new technology. Trying out a new technology like Convex meant we did not have nearly as much experience with it than other products. The docs were recently created, so our unfamiliarity pushed us into a lot of learning with the platform. Convex was unfamiliar, but also serverless backends were a completely new concept that we had to learn rapidly to implement the technology.

Another major issues we had was deploying the project to Vercel. Due to Github ownership issues, unfamiliarity with implementing a serverless backend to production and server management issues, Vercel deployment had some challenges. Declaring environment variables and reassigning the deployment command in Vercel helped solved the issues we were having with Convex and were able to make it work.

Accomplishments that we're proud of

Our recommendation engine is exceptional. It learns your style preferences with very little input and allows us to categorize a large selection of changing styles, creating a seamless user experience. By utilizing cutting-edge technology, we are able to achieve high accuracy and adaptability presenting our platform as a great choice for anyone.

Convex (Serverless Backend), populating with users
Our Clothing Customization ML Model/Algorithm, populating average ratings in results in Convex
Stripe API for payment transactions
Vendor Registration
Vercel Deployment for Live Application
Passing data between routes with React-Routing
Responsive, Dynamic UI

What we learned

We learned how to integrate new services such as a server-less backend such as Convex. We also learned how to integrate a recommendation algorithm using OpenAI and Python into React. Furthermore, we learned the different considerations we had to take in order to deploying to a live domain.

All of us also learned a ton about UI. Developing efficient UI with so many layers overwriting each other became trouble, especially when importing difference components. We had much troubleshooting with being able to center select items or apply the proper style. After having so much practice with UI across the board, it likely will be much faster development going forward.

What's next for FashionFlipped

We plan to add a feedback form to provide more user input into our algorithm for more accurate customization. On top of that, we plan on creating a vendor side platform to view orders and manage demanded styles from admin. Creating an admin portion of the platform will become important as well to manage what trends and inventory is being created by vendors. We hope to deploy this as a business idea, and how to learn the logistical and technical aspects of running a business with a more sophisticated sophisticated supply chain.