Kirei

Kirei homepage - scanner box
Inputted ingredients list and list of possible acne-causing ingredients below
Previous cont.
Another inputted ingredients list and list of possible acne-causing ingredients below
Previous cont.
An ingredients list with no warning ingredients (lol)
Secondary info page - list of ingredients that help with acne!
Previous cont.

Inspiration 🤩

I've been having trouble figuring out what products would help and what would make my acne worse (I have mild cystic and hormonal acne) and decided to make something to help identify potentially harmful and acne-inducing chemicals in cosmetics.

What it does 😺

Kirei is a search engine where you can input a cosmetic product ingredients list (with ingredients comma-separated) and Kirei will return a list of ingredients present in the product that may cause acne or irritation, complete with Wikipedia link and simple, easy-to-understand description.

How I built it 💻

I prototyped and designed the interface on Figma (link to the prototype - you can see obvious differences where I changed my mind). I coded the actual web app with vanilla HTML, CSS, and JavaScript (bit of jQuery) with a JSON file containing a database of about 200+ different acne-causing ingredients. It's hosted on Qoom.

Challenges I ran into 💣

I had never used JavaScript to the depth that I did for this project, and I had trouble making a way to compare each separate user-inputted item to my small database. I also spent a very long time doing research on different ingredients and hand-inputting them into a JSON format, and had trouble making sense of many of the complicated scientific names.

Accomplishments that I'm proud of 👏

I'm proud of making such a (for me) complex web application by myself! This idea came to me last minute on Saturday and I almost abandoned it since I thought it was way too hard for the level of experience and skill that I had with JavaScript. I'm glad that I stuck with it because I learned so much and enjoyed making something that is applicable to real life - and something that I will use personally.

What I learned 🤔

I learned a lot about using maps in JavaScript and using JS to edit the HTML code, and how to utilize arrays and iteration for comparing items in JS. I'm really proud of learning how to pass JSON values into the HTML display which saves lots of time rather than inputting every single line being displayed in the HTML. On the flip side, I learned so much relating to different cosmetics ingredients and their purposes, and I have a new knowledge of how many different and surprising things are in makeup and skincare products. I also learned to be much more cautious about what I apply on my face.

What's next for Kirei 🌸

My database of ingredients is relatively limited (200+ isn't that much in the grand scheme of things) so I'd love to do more detailed and intensive research on other ingredients and chemicals to add to the database, therefore making it more effective. I'd also like to make sure I've covered all alternative names for ingredients that may pop up in ingredients lists (I inputted some alternative names but I'm not sure I have all of them) to make sure ingredients are always caught by the search code.

Demo product links 💄

In the video, I demo the searching app with two products - first Dr Jart's Cicapair Treatment and then Benefit Cosmetics' Air Stick Foundation. Feel free to try it out below with other products!