It's frustrating when our skin is not what we want it to be. With the amount of skincare products and the diversity of ingredients used, it is often difficult to find a product that works for you. There may be a product that works amazingly for someone with the same type of skin as you, but that product may break you out horribly. Why is that? People react to certain ingredients differently and that's where "Skincare" comes in.

What it does

You can input or search for products and attach ingredients to them. You can tag the products that have caused you to break out and flag them. We analyze through the ingredients of those products to try to find which ingredients are harmful to you! By having a list of ingredients that may be harmful to you, you will have a better idea on which products to purchase by looking up other products within our database. You can also take a photo to parse through the ingredients of a product, which is quicker than having to type it all out.

How we built it

The frontend was build in Vue.js and the backend was built using Node and Express. The database used was GCP's datastore. We use Google Cloud Vision for text detection for parsing the photos.

Challenges we ran into

  • The asynchronous nature of network calls and chaining promises.
  • Using the Datastore Node.JS API for entity updates.
  • Using Vue.js as our frontend framework while learning it at the start of the weekend

Accomplishments that we're proud of

The app looks pretty clean with a login and register screen, search, parsing, and most of the functionality that was imagined was implemented.

What we learned

How to use Google Cloud Platform with Node.JS. How to use Vue.js.

What's next for "Skincare"

If we were to continue, the next steps would be to pull off skincare product databases, so the user wouldn't have to input it him/herself. We would also implement a calendar feature, where the user can keep logs of when a product was introduced and when a bad reaction occurred. In addition, we will want to add full-fledged support for product images.

Built With

  • google-cloud-datastore
  • google-vision
  • vue
Share this project: