Summary

Skin/Care is a full stack MERN application that empowers users to draw connections between their cosmetics and potentially irritating ingredients.

Visual of desktop landing page of application

Many users can have vastly different experiences with cosmetics, so it can take personal trial and error to determine what works. To make this process easier, this app allows users to easily flag ingredients and save products into three different categories: favorites, failures, and general bookmarks. When a user is researching a new product, they can easily see if it contains an ingredient they've flagged previously, as well as any other potentially irritating or acne-causing ingredients.

My approach to this project was making React components as reusable and scalable as possible. To gather and store data, I implemented data scraping and CRUD routes through Mongo. I established a simple icon system for adding to favorites and added clear visualizations to identify flagged ingredients.

Mobile view of product ranking and ingredient list