Lookism

• 

  Logo

• 

  Landing Page

• 

  Figma Design

💡 Inspiration

Finding the right outfit can sometimes feel impossible. Whether that is in a professional environment, hanging out with friends, or quality time with that special someone, appearance has a big influence on our lives. Hence, we wanted to design an application that offered seamless recommendations no matter the occasion. With Lookism, users no longer have to worry about running out of inspiration. Whether they want to explore new styles or find new outfit ideas, Lookism does it all.

🔍What it does

Lookism is a crowd-sourced application driven by users who have the opportunity to create a profile similar to Instagram, or Facebook. After creating an account, consumers are prompted to choose a few appealing styles of clothing. Taking the style tags, the system will then automatically recommend outfits stored in the DB to the user. Lookism prompts the user to either swipe left (for dislike) or swipe right (for like) on the pictures. Pictures liked by the user will be stored in a collection displayed on the sidebar which gives a description of the clothing items in the photo. Additionally, users also have the opportunity to upload personal outfits.

🚀How we built it

• Design: Our idea started with a Figma prototype, which outlined the key features/components of our application.
• Frontend: For UI/UX design, we used React.js and Tailwindcss to carry most of the burden for styling.
• Middleware: The Axios and Express frameworks were used to create a REST API that connected our dashboard to our database.
• Backend: We used MongoDB Atlas to store our users, and card component data. And Node.js and Mongoose to create the models for the collections. Additionally, our Machine learning model, which was used to determine user compatibility score, was implemented in python with SciKit-Learn.

🔨Challenges we ran into

We have two main challenges when developing the project. The first arose in the backend with developing user models which supported authentication and authorization. Since we are storing private user information, we wanted to encode or limit the public access to our database, and developing Jsonwebtokens was definitely time-consuming. The second challenge was integrating everything with the front end. Large amounts of data are constantly passed between the front and backend which leads to complex Axios class and data storage dilemmas. Hence, the sheer complexity of the project made it difficult to develop the UI.

🏆 Accomplishments that we're proud of

We are most proud of overcoming challenges and working together as a team to complete the project. There were periods when the product felt too complex and we wanted to cut down on the number of features. However, after what seemed like an endless stream of bugs, and documentation review, we successfully crafted a fully functioning web application. This was our first time working with many features, and we take pride in our ability to plan, delegate, and effectively work toward our end product. After all, we are all proud creators of Lookism.

👑 What we learned

As a team, we all gained meaningful experiences with the full-stack development process. From learning about the verified users in a login-password database to niche react features like swiping animations, the team explores multiple new frameworks. After finishing our project, each member had a deeper understanding of the MERN stack and how each component interacts with the other.

📈What's next for Lookism

• A better ML algorithm that takes in more data input fields like (weather, gender, height, ... etc.)
• Features that allow users to create multiple collections/folders to save their favorite outfits
• Friending feature that allows users to stay up to date with what their friends post
• Suggesting users alternative options to clothes pieces if they are no longer available at links provided in the product description

Built With

• axios
• bcrypt.js
• chakraui
• express.js
• figma
• javascript
• mongodb
• mongoose
• node.js
• python
• react.js
• scikit-learn
• tailwindcss