skincare.io

skincare.io skin quiz
skincare.io routine page
skincare.io landing page
debugging after an all-nighter!

Inspiration

With the increasing popularity of self care regimes, specifically skincare, more and more people are becoming interested in improving their skincare routines. However, many people who are new to skincare might find themselves overwhelmed by the sheer number of sites promoting various products, and underwhelmed by the lack of resources catered to building a free, comprehensive skincare routine. Sifting through various social media ads, or diving through outdated internet forums takes time, effort, and often yields less than satisfactory results. After experiencing many of these pitfalls ourselves, we set out to create a simple, intuitive, and free solution for those seeking personalized skincare routines in a timely and efficient manner: introducing Skincare.io!

What it does

Skincare.io’s user interface is simple and intuitive, especially for skincare newbies to use. For those who don’t want to pay a visit to the dermatologist, or don’t have an older sister to consult about their skincare concerns, Skincare.io quickly and easily offers a skincare routine to suit users’ skin type and future skin desires or goals. Upon landing on the website’s home page, users will be greeted with a minimalistic home page, free from any unnecessary distractions or ads that might take away from the skincare curation experience. Once users have selected the “Get Started” button, they are directed to an intuitive form where they can select their skin type, such as oily, dry, or sensitive, and skin needs, with routines either aimed at targeting acne, anti-aging, or sun damage prevention, etc. Once users have completed the quiz, they are presented with personalized recommendations of a core set of skincare products such as cleansers, toners, serums, etc, that are catered to the user’s skin type and skin goals. The side bar allows users to efficiently navigate between different categories.

How we built it

Frontend

We utilized Node,js, Next.js, and TypeScript to build the core of our frontend. When it came to styling different elements or components on the specific webpages, we used Tailwind CSS, due to the effective ability to build any design directly in markup. Our design choices, such as color palette, fonts, and page structure, were all built with the user in mind. The landing page and quiz is welcoming and encouraging for users to discuss their skin and get excited about their results. Each product listing displays the name of the product as well as a clear picture.

Backend

We first aimed to utilize a skincare API, however there was little public databases or APIs that aligned with our purposes. Thus, we decided to web scrape two websites, INCIDecoder and SkinCarisma, to build our own database of information. We built the web scrapers in Typescript along with the Puppeteer library, to scrape the products along with their ingredients from the first site, and then matched them up with the ingredients' costs and benefits that were scraped from the second site. We developed an algorithm to calculate the top 3 best products in each category when user preferences and skin types is factored in. This was based on a priority score that we gave each preference, and a multitude of unique pairings and distinctions specific to skincare, such as comodogenic costs with oily skin benefits. Our database, built with postgresql, contained a final collection of 300 products and hundreds of ingredients and their features.

We deployed the application on a DigitalOcean VM using Ubuntu as the operating system. To ensure continuous uptime, we employed a process manager, PM2, along with Cloudflare Tunnels to swiftly provision robust SSL certificates for the domain, avoiding the complexities of verification.

Challenges we ran into

Narrowing down the scope of our idea (brainstorming took the entire first day)
Merge conflicts
Adjusting to new technologies & languages
Developing the scoring algorithm
Finding publicly available data on skincare products, no free api :( had to create technology ourselves >:))))
Learning how to build a web scraper and how to understand the hierarchy of websites

Accomplishments that we're proud of

Proud of us for learning new technologies on the fly such as Tailwind, Node.js, TypeScript, and successfully integrating them into our project
Proud of our UI choices because we spent almost an entire day architecting and planning out the layout of the UI after considering user stories, personal experiences, and more

What we learned

Integration of backend and frontend
Learned about using different frameworks together, installing and importing different requirements, and learning new syntax
Became much more familiar with GitHub, git, version control (pushing, pulling, merging, etc.) so frequently
The process of developing a full-stack application from ideation all the way to deployment (with no bugs in the final product!)

What's next for skincare.io

Continuous integration to keep site continually updated
Expand product options: include active ingredients category, safety scale, and links for where to buy
Make it more interactive, allow users to create profiles, share their routines, favorite skincare products/routines, and ultimately create an online skincare community