Inspiration
With ultra-cheap clothing, fast fashion brands like Shein have taken the world by storm, driving clothing consumption to an all-time high. Moreover, under the pressure of limited-time sales, people often forgo or forget about checking their wardrobes for similar pieces before checking out. We wanted to streamline the process of doing so and empower buyers to make more eco-conscious decisions so we created 'whattowear', your pocket-sized wardrobe.
Additionally, we recognise that a lot of time is spent daily to avoid repeated outfits when meeting the same people, spending excessive time contemplating daily attire and planning future outfits. This is especially important for users, like students who go to weekly classes and mistakenly wear the same outfit each class. Hence, our website aims to also enhance the efficiency and creativity in daily outfit selection.
What it does
'whattowear' enables you to catalogue your entire wardrobe by taking pictures of your clothes and uploading them to the app. Viewing it is even easier using the Wardrobe page.
Our app not only allows you to check your entire clothing catalogue with just a click, you can mix and match pieces to create up to a week's worth of unique outfits effortlessly in the outfits page. The page is split into two, allowing users to design the current week's outfits while viewing the outfits they wore in the previous week side by side. By showcasing outfits worn in the previous week, users can compare and contrast their style choices, allowing them to notice patterns, experiment with different looks, and avoid repetition.
How we built it
Our team collaborated on the design of the website, user flows, database and logical components to be implemented. Two members worked on the front-end using React while the other two worked on the back-end using MongoDB after which we integrated them together. The data is stored in both MongoDB and local storage for easier reference in the front-end logic
Challenges we ran into
Our team took some time to break down the different actions and the schema of the database before going into the code. We also encountered challenges in integrating the front-end with the back-end, ensuring seamless communication between different components. Additionally, coordinating the development of various features posed logistical challenges that required effective communication and collaboration.
Accomplishments that we're proud of
Successfully establishing a functional app that addresses the outlined challenges was a significant accomplishment. The team is proud of implementing features such as outfit planning for specific days as well as a user-friendly wardrobe management system.
Despite some team members initially lacking familiarity with the MongoDB, Express, React, Node (MERN) tech stack, we demonstrated resilience and adaptability by acquiring new skills on the fly during the coding phase of the project. We are proud to be able to successfully complete the development of this project that we are passionate about.
What we learned
Through the development process, our team gained valuable insights into coordinating tasks, integrating frontend and backend components, and designing a cohesive user experience. It also served as an excellent opportunity to enhance skills in web development, database management, and teamwork. Moreover, this experience also provided some of us an opportunity to explore and become acquainted with a tech stack that was previously unfamiliar to us.
What's next for 'whattowear'
Future plans for 'whattowear' include:
Weather Based Recommendations: Integrate a weather API to provide users with outfit suggestions based on the current weather conditions in their location.
Social Sharing: Allow users to share their outfits with their friends so that they can coordinate and plan their outfits
Randomised Outfit Recommendation: Recommend a random outfit to the user
Built With
MongoDB, Express.js, React, Node.js
Try It Out
GitHub Repo: https://github.com/pra-navi/WhatToWear
Prerequisites
Make sure you have Node.js and npm installed on your device.
Steps
- Clone the repo
- Start the server by enter command below in terminal:
cd WhatToWear/server
npm start
- Set up the client
cd ../client
npm install --legacy-peer-deps
npm start
- Go to http://localhost:3000 to start using our application. Have fun!
Log in or sign up for Devpost to join the conversation.