ClosetCrush

Introducing ClosetCrush, an all-in-one online-shopping wishlist. Save your favourite finds, mix & match pieces, and preview oufits you yearn for. Be confident about your purchases with ClosetCrush.

Comment 1

Inspiration

As avid indecisive online shoppers, the four of us aimed to build a platform that allowed the user (or us) to save items to a dedicated Wishlist, and be able to view them in complete outfits. Rooted from the typical persons 3-5 day decision time to actually press order, we built a platform to solve this problem. Aiming for more of a game-like feel, the inspiration behind the design of the project came from a mix of childhood dress-up games like Shopaholic, the Bratz game simulator, and the wardrobe app from the Clueless movie. The goal was to make the website have a fun, whimsical, and vintage feel. It is every little girl's dream to have a closet like Cher (in Clueless), Hannah Montana, or Barbie. All while being a Wishlist, this project targets that side of people, allowing them to properly tailor their closets in a fun way.

What it does

As aforementioned, the functionality of ClosetCrush is to create an all-in-one online shopping Wishlist. The user is initially prompted to sign in or make an account, after completion, they are brought to a page that displays a podium awaiting their outfit selection - the Style Studio. To upload a new piece of attire, the user fills out a form where they enter a hyperlink, cost, and brand name. The item is then automatically added to its respective category. If the user wants to see it matched with other clothes, they can return to the Style Studio, and select the items they want to see together. To save an outfit, the user can "crush" the combination, saving it to a directory.

How we built it

ClosetCrush was built with HTML/CSS/JavaScript on the frontend and Node.js/Express on the backend, featuring a dual database approach with MongoDB for production and localStorage for offline functionality. We implemented email-based authentication, category clothing management with image background removal via Replicate RemBG API, and an interactive outfit creation system with "crush" functionality to save favorites. Our synchronization system allows data persistence between server and local storage, handling API failures while maintaining user data integrity. The responsive design uses CSS Grid and Flexbox for a mobile-first interface with a playful Y2K aesthetic.

Challenges we ran into

We spent a rather long time trying to overcome GitHub errors in version control. Additionally, setting up node and syncing the server file between the four of us came as quite a challenge. We initially came in with a strong idea of what we wanted -aiming to implement a social media aspect- however quickly learned that that was not feasible in 24 hours, and decided to focus on the first "part" of our idea. A large problem we ran into towards the beginning of the hackathon was that we could not scrape the images from certain websites (ie. Aritzia), so we decided to demo with websites that did work. Another major challenge we faced was that our cloud database (MongoDB Atlas) stopped working, forcing us to switch to saving the data locally. While merging the backend with the frontend, we ran into issues with the design of the website being altered by the merge, and had to fix that (which got easier the more it happened). As per expected, some of the features we aimed to have implemented were discarded as a result of technical challenges and sorting out our priorities in terms of timing.

Accomplishments that we're proud of

As we are all very new to hackathons, we are extremely proud of the project we were able to complete in 24 hours. Considering our past experience, formal education and skills, we were able to deliver a moderately complex UI/UX and backend for our project. Additionally, we are proud that we were able to translate our Figma prototype into website, adhering to the original design. Finally, seeing the website functional as we had imagined it to brought unquantifiable pride.

What we learned

Within the last 24 hours, we have gained a lot of experience, both technical and soft. A significant new skill is version control - something we had done in the past, but at an individual scope. Furthermore, combining frontend and backend at this scale was relatively new for us. Workflow on a collaborative project was incredibly important, with communication at the utmost importance.

What's next for ClosetCrush

Similar to the 2000s dress up games we played in our childhood, we would like to implement a model to try on items for the Style Studio. As inclusivity is incredibly important to our team, this posed a few feasibility challenges due to the layering and coloring of various SVG files, which would require illustration. We would also like for a toggle feature of dimensions, which would allow for body inclusivity as well. Additionally this would add the complexity of fitting the clothing onto the model in a two or three dimensional manner. As mentioned previously, we had initially had a vision for a social aspect - Fashionista Friends. This would extend from the profile segment, where the user can interact with friends and their closets. The premise would be to crush on their friends Wishlist items and prompt conversations on closet sharing - a big step for sustainability in fashion. This segment would also create community through the common interest of shopping and styling. To take it further, Fashionista Friends would follow a social media model, with followers, feeds and explore pages. This would create an innovative new online environment, fostering creativity and uniqueness. We would love for everybody to find their crush!

Built With

Share this project:

Updates