💡 Inspiration 💡
We were inspired by Tinder, and wanted to create something similar but for outfits. Creating the perfect outfit for any occasion takes a lot of time, and can be frustrating. This inspired us to build an app that would help us come up with outfits! Our app would allow users to browse outfits combinations, purchase them easily, and save styles that they like.
✨ What it does ✨
Style Master allows users to get outfit inspiration! The app first asks for some basic preferences, such as gender and style. Once the user inputs this, it fetches related tops and bottoms from the web (currently just h&m) and displays them together, showing what the combined fit would look like. The user can swipe through images of upper-body and lower body clothing to visualize outfit combinations. When they see a combo that they like, they can save the outfit to their account to see later. All liked outfits can be seen on a gallery, allowing the user to easily revisit their favourite fits! If the user sees an item they want to buy, they can be redirected to an e-commerce platform selling a similar item with just a click.
👷♀️ How we built it 👷♀️
For the frontend, we used React Native, combined with Expo, so it could be displayed on our mobile devices. For the backend server, we used Flask with Python. We used Playwright to create our headless web scraper, and stored user information on Mongo DB Atlas. We also used SerpAPI to perform google image search – this allowed us to find e-commerce stores that were selling clothing similar to the outfit that the user likes.
🚩 Challenges we ran into 🚩
Since this is the first time any of our teammates used React Native, it was a learning curve to implement the UI display in accordance with react native rules, since they are very different from the rules of react and html.
It was really hard getting the little cat animation to work, in the beginning. Originally, we wanted to use Lottie, which was where we found the animation in the first place. However, the embed code was made for React and it wouldn't work on React Native, so we ran into a lot of errors initially. We weren't able to export it as a gif file either, so in the end we were able to export it as a bunch of images and hardcoded it.
We also tried to get outfit combinations to appear on a picture of a person (a virtual try-me-on) for a long time, but weren't able to do this. We tried to use DeepFashion TryOn and many other virtual try on APIs, but kept getting a bunch of errors which we couldn't fix.
🥳 Accomplishments that we're proud of 🥳
We're very proud of getting the double carousel for the outfit's top and bottom to align perfectly and be centred, as this took a lot of time to get right! We're also very proud of our web scraper that allowed us to extract clothing items straight from H&M's website. We also really like the overall design of the app, especially features like the animated cat, the top and bottom carousels in Browse aligning perfectly, and the colour combinations.
🧠 What we learned 🧠
This was our team's first time building a mobile app using React Native, so we learned a lot about how that works. Particularly, we learned how to build and style UI components for a mobile app. There was a lot of trial and error, frustration, and random bursts of happiness that accompanied us throughout the process. This was also our first time doing web scraping, so it a lot of fun learning to use Playwright to bypass anti-bot detection.
🚀 What's next for Style Master 🚀
There's many features we want to add!
- Virtual Try On: Be able to click a button to see how the outfit would look on the user
- Improving Fit: Analyze the data on what outfits the user likes to generate more tailored fits
- More Stores: We want our app to include clothing from many different stores and brands, instead of only H&M
- More Filters: More than gender and formality, we want to add more options for the user to filter by, such as seasons, preferred colour tones, and price ranges
- More outfit components: Instead of just displaying upper and lower body outfits, we want to allow users to browse through hair accessories, shoes, jewellery and more to create a more nuanced outfit combination. We also want to find a way to allow users to browse for full-body outfits like dresses.
Log in or sign up for Devpost to join the conversation.