SkinfoCare

Home Page
Quiz Sample
User Dashboard
Barcode Scanner
Ingredient Analysis Page

Inspiration ✨

A few days ago, we were joking about how hackathons always lead to breakouts, all-nighters, and way too many energy drinks. But, as we were laughing about this, we realized that we all felt confused about skincare both inside and outside of hackathons. Should we be using chemical or physical sunscreens? How often should we be exfoliating? And are the ingredients in our skincare working with us or against us?

What it does 🫧

SkinfoCare is a web application that demystifies skincare ingredient lists, ensuring that users can confidently choose products that truly benefit their skin. Essentially, when a user signs in, they will be prompted to complete a survey that helps determine their skin type. Then, whenever they are curious about a skincare product, they can scan its barcode and this application will provide them with a personalized analysis. This will include an overall rating as well as a breakdown of the ingredient list, ranking each one individually as “good”, “neutral”, or “bad” based on their skin type.

How we built it 💻

UI/UX: We utilized Canva and Figma to design the user interface. Canva was used to create the initial wireframes, and Figma was used to refine the overall design.
Frontend: We used React and Next.js to build the web app and manage routing. Then, to maintain a consistent UI, we used Tailwind CSS.
Backend: The backend was developed using Python with FastAPI. We later used this to integrate GPT function calling for personalized skincare ingredient analysis.
Database: We used MongoDB to store information on skincare products and their ingredients. This DBMS allows us to easily scale our app in the future and store large amounts of data.

Challenges we ran into ⚙️

A crucial part of our web application is its ability to scan the barcode of a skincare product and rate its ingredient list. However, when we started this hackathon, we had no experience working with barcodes. So, we turned to resources like Stack Overflow to seek guidance from the developer community, brainstormed solutions collectively, and explored various datasets to find reliable sources of ingredient information. Ultimately, through collaboration and persistence, we were able to integrate barcode scanning functionality into our app, ensuring users receive accurate and comprehensive ingredient ratings effortlessly.

Accomplishments that we're proud of 🎉

Real-world Problem Resolution: We're proud of identifying and addressing a real-world problem that we can personally relate with through our project. By focusing on skincare product ingredient transparency, we provide users with insights that help them make informed decisions about their skincare routines.
Modern Minimalist Design: Our team created a modern and minimalist design that enhances user experience. By focusing on simplicity and functionality, our interface is both visually appealing and easy to navigate.
Barcode Scanning Functionality: This feature enables users to directly scan their skincare products and instantly obtain access to detailed information about the ingredients used and their potential benefit or harm.
Data Visualization Tools: By integrating graphs, we present skincare product information and ingredient data in a visually appealing way. This is essential, as it helps users quickly grasp key insights and make better-informed decisions.

What we learned 📚

We learned how to integrate OpenAi Function Calling into our web application and slice and sort the information into a desired form. This allowed us to gain insight in prompt engineering.
We enhanced our UI/UX design skills. Specifically, we delved into Figma development and utilized it from design to prototype. We discovered useful add-ons, shortcuts, and libraries that would benefit us for future projects and hackathons.
By implementing a scanning barcode feature, we learned about the application of computer vision.

What's next for SkinfoCare 📈

In the future, we hope to implement:

A recommendation system so that when users scan a skincare product with a low rating, they will be provided with better, more suitable options.
A skincare compatibility feature which will inform users on whether or not two products should be used one after the other. This will help avoid issues like irritation and skincare pilling.
A detailed weekly skincare routine, displaying how often to use more intense skincare products like exfoliants and retinol.