Shop to Impress!

Need help dressing to impress? Shop to Impress recommends online clothing so you can pose with confidence! Take your confidence to another level and compete with others through the multiplayer mode.

Comment

Inspiration

Shop to Impress emerged from endlessly scrolling on Pinterest looking for the perfect piece to make up a new outfit, only to find said perfect piece was sold 6 years ago, is a limited edition piece, and can only be dug up in random thrift stores (if you're lucky enough). Although the aforementioned example is a bit exaggerated, Shop to Impress is an interactive web game to help you buy pieces for your next outfit as we believe fashion ties strongly with one's identity. Shop to Impress' multiplayer mode is also inspired by Dress to Impress :))

What it does

Shop to Impress' singleplayer runway allows you to choose up to three keywords to describe an outfit theme. Using these keywords, Shopify products are queried to build a curated catalogue. From this catalogue, you can swipe through and try them out on a 2D model. The multiplayer runway allows you to choose a theme and compete with other players to put together the best outfit!

How we built it

The frontend was built with JavaScript React+Vite and the backend made with Python Flask.

Challenges we ran into

Something we really wanted to try was having 3D models wear the apparel. But given our limited processing power, it really wasn't conducive to a fluid user experience, and mesh generation is a very time-consuming process. Another big issue we encountered was how to query Shopify clothing since we can't access every store's products. We tested and researched different methods, such as the Shopify Shop APIs, but their per-store nature didn't help our purposes; hence, we settled on a scraper. Unfortunately, this means our catalogue is a bit limited since we could not query as many products as desired.

Accomplishments that we're proud of

We're pretty proud of the generated 2D models that can dynamically wear different clothing queried from Shopify and the multiplayer runway!

What we learned

We also picked up some cool CSS tricks like the moving components on the Home screen and Selection screen, and how to make background music persist across different pages.

What's next for Shop to Impress

The next runway for Shop to Impress is to implement 3D models for the clothing to make the game more interactive and give the user a more realistic view of the clothes. Another idea for the future is integration with Shopify's mobile app, Shop, to display clothing more smoothly and make it simpler for users to purchase their next hit piece.

Share this project:

Updates