Tapey

Tapey helps users find eco-friendly makeup by rating products based on ingredients and sustainability, making it easy to choose beauty products that are healthy and better for the planet.

Comment

Inspiration

It can be easy to forget how small things in our daily lives can impact our environment, and for this project, we wanted to bring attention to a small change users can make in their routines by creating a website that would facilitate these changes. As daily users of makeup, we decided to explore how our cosmetic products can harm the environment. Our inspiration for Tapey came from the app Yuka, an app that allows you to scan barcodes to determine how healthy food items or products are. We wanted to create something similar with a focus on Sephora products that also informs users of how environmentally friendly products are, meaning that the ingredients are made with non-biodegradable or toxic chemicals. Tapey helps them find alternative options that are more environmentally friendly. The inspiration for our name also came from the name of the building we were all roommates in during our first year at UCSD, Tapestry.

What it does

Using a search bar, Tapey allows users to learn about how healthy the ingredients in products are, the toxic ingredients they might have, how environmentally friendly the ingredients are, and about a different product that has an overall better score.

How we built it

We first utilized tools such as Lovable to quickly prototype a basis for our website that we can work from. With our template we began to style our website by changing color schemes, adding images, and captions that are representative of our mission. The website consists of our home page, start/search page, and more information page. We dedicated the homepage to being an introduction, where we coded in our mission statements, images representative of our goals, and our recommended brands. We then dedicated the more information page to consist of details on why clean beauty holds such an importance. We created quick captions discussing different reasons as to why clean beauty is so important, to further inform our users who may be more interested in our topic. The start page focuses on the main functionality of the website. Where the user will be able to search a certain product and be given a cleaner alternative to such product based on overall scores produced by individual ingredients and sustainability. Being able to have supporting UI from Lovable allowed us to focus more of our time on scoring logic, researching databases, and styling the website individually. As the main goal of our website is to provide users with cleaner alternatives to their makeup products, we had to create a scoring system that determines how clean a product actually is. We created a scoring system that averages the scores of ingredients and sustainability of each product to produce an overall score. With this, we implemented functions where the user will be given the score of their searched product and our code will then look for products in the same category with higher overall scores to suggest it as a cleaner alternative. All data of products comes from a Sephora csv found on Kaggle, which contains all products, their ingredients, brand, and more.

Challenges we ran into

One of the biggest challenges we faced was navigating JavaScript. We didn’t have a strong understanding of the language, but Loveable only used JavaScript, and we didn’t realize this until after finishing the user interface. At that point, it was too late to restart and switch to a language we were more familiar with, so we decided to take it as an opportunity to improve our understanding of it. We spent time researching JavaScript, and Loveable ended up being a really useful tool in helping us understand it and execute our ideas better. We also had trouble with GitHub. Along the way, we noticed that when we would push or pull, sometimes we lost commits. We were unsure as to why, but we worked around this by working inside of Loveable.

Accomplishments that we're proud of

We are really proud of our user interface, which was really fun and interactive to explore using Loveable. The user interface was one of the more important aspects of our project because we wanted to make sure our website is easy to navigate and also visually appealing to make the user experience as enjoyable as possible. We wanted users to easily understand the product ratings, what ingredients are harmful in the products, and any other details surrounding them.

What we learned

Working with data in this project was a valuable learning experience. We saw how different it is to work directly with real data compared to how we usually use it in class, giving us a more hands-on understanding of the process. Having a specific goal out of the Sephora data set, it pushed us to think about small details like how we would determine a product isn't healthy, how we would define the score, and how to go about pulling from the data set. Going into this project, JavaScript wasn't our strongest language, so along the way we were able to learn more about JavaScript as we learnt from the template Loveable gave us and did outside research.

What's next for Tapey:

With our current Tapey, it only has access to some items that are available at Sephora, but in the future, we would love to expand it to have access to all products available at Sephora and at Ulta beauty since unfortunately, we weren't able to find a dataset including Ulta Beauty products. With this, it can be more accessible and useful to more users since Sephora has high-end products, and Ulta Beauty has more affordable drugstore products, which would also help us provide more affordable, healthy products.

Built With

Share this project:

Updates