Disclaimer: Notice of cease of operations.

As of June 2023, Clarity skincare db has been taken offline due to growing costs of the database provider and the declining interest of the client to keep the service online. The website is still deployed but none of the microservices on the back-end are connected to the front-end. This post serves to document the work I provided on this project.

Overview

When trying to find the right skincare or beauty product, one of the most difficult parts is trying to decode all of the ingredients that are used. A simple foaming cleanser can have ingredients with big names like Sodium Lauroyl Lactylate, or Behentrimonium Methosulfate and Cetearyl Alcohol. How's anyone without a degree in chemistry supposed to know what that means?

Enter Clarity, a web app where users can enter a comma separated list of ingredients found in their beauty and skincare products to learn about how helpful or harmful they are. It's as simple finding your skincare product's product page, copying the list of ingredients, and pasting it into the search bar.

This was a fun project I did from March to April of 2021. I hadn't really worked with the MERN stack (MongoDB, Express, React, Node) so I figured I would try it out on this app idea.

Design

Since skincare is largely associated with "healthy" and "natural", I opted for a more muted and earthy base color palette. I feel like my regular design style leans towards futuristic or technology complementary color and typeface choices. This kind muted and natural of aesthetic was definitely a challenge for me at first, but it helped me train my design muscles to help me think more outside the box.

Initially I wanted to add sort of long curved section breaks at the bottom of the page, but I didn't really know of a natural way to include them. They can be seen in the Figma (shown above) but I think I'll save them for the next project.

Implementation

My technology stack for this project is the tried and true MERN stack. That's MongoDB for the database, Express for the server, and React for the user interface: all of which run on NodeJS. I've been too scared to touch back-end and databases for quite a while, but working on this project helped me get out of my comfort zone.

Database

First, to populate a database you need data. My girlfriend showed me Paula's Choice, a website that has a skincare ingredient dictionary with ratings for each ingredient. I wrote a webscraper in NodeJS to grab all of the data in the table for over 1800 entries in the table. Starting from the initial dictionary page, the scraper travers each page using the NodeJS HTTP Module.

I used CheerioJS to parse the HTML using jQuery syntax to grab everything I needed for one ingredient entry. Then once all of the data was gathered, I exported the full JSON to a MongoDB Atlas Database.

The MongoDB Atlas was very easy to set up using their UI. I know there are command line tools for accessing a MongoDB cluster, but I had a really pleasant experience using MongoDB Compass. I basically just clicked through a couple of dropdown menus and populated an entire database with the full JSON I scraped from Paula's Choice.

Back-end

Writing the Express code also wasn't as bad as I thought it would be. It's basically used as an easy middleware for retrieving information from the database. Mongoose made all of the database code very easy to use and understand. Their documentation is fantastic.

I also made two of API endpoints for my React app. One for finding a single ingredient, and one for finding a large list.

The first endpoint was pretty straightforward. The basic algorithm is

• server receives the search query
• use the find() function on the Mongoose model to search the database
• if find() returns a non-empty object from the database, send the full document back to the client
• otherwise, send "Ingredient not found"

The second endpoint is a bit more complicated. Since there are multiple terms to take care of, there's a lot more care that needs to be taken with the search query. The algorithm is as follows:

• scan the query for "1, 2 hexanediol" (the only edge case where an ingredient has a comma in it)
  • if "1, 2 hexanediol" is found, add it to the array of search terms
• separate the query into individual terms by comma-splitting and save them into a search term array
• use the find() function on the Mongoose model to search the database for exact name matches
  • remove all search terms from the search term array that correspond to an entry returned from the find()
• use find() on the remaining search term array in regex mode to return the "most similar" match from the database
  • append the list of documents returned from the find() to the exact name matches list of found ingredients
  • remove all search terms from the search term array that correspond to an entry returned from the regex find()
• send a payload back to the client consisting of two arrays: 'found' and 'notFound':
  • 'found' containing all of the documents returned from either find() operation
  • 'notFound' containing all of the search terms were not found in the database as a result of either find() operation

Once I got it all set up, I deployed the back-end to Heroku.

Front-end

Working with React again was really straight forward. This time I was using more hooks and no class components and it was a lot less code. Overall it felt easier to read what was going on, but I took a little getting used to debugging. I definitely prefer using hooks over class components now however.

The structure of the components on the page is really straight forward as well since its only a single page application with data populating different cards as requests come in.

Final Thoughts

This app isn't really all that complex, but it really helped me put into perspective that working with the full stack isn't as bad as I thought it would be. Maybe in the future I can add account creation and shareable lists. I definitely wanted to implement some kind of tag system where users can look up skincare products directly from the clarity website to find if someone already made a search for them and save them.