SkinWise AI

Inspiration

Skincare information can be confusing, and people may struggle to understand their skin concerns or decide what to focus on first. I wanted to explore how AI could make skin analysis easier to understand and help people turn results into practical skincare steps.

That idea Inspired skin wise AI: a web application that brings AI-powered skin analysis, visual insights, personalized routine planning, and progress tracking together in one place.

What it does

SkinWise AI uses the YouCam Skin Analysis API to analyze a submitted face photo and provide cosmetic estimates for four categories: skin texture, pores, acne-related appearance, and wrinkles.

The application goes beyond displaying scores. Users can:

• View their analysis results through clear visual charts.
• Explore their results using a visual analytics dashboard.
• Save previous analyses in browser-based history and compare check-ins.
• Build a skincare routine based on their goals, skin sensitivity, and budget.
• Review a detailed report of their results.
• Use a responsive interface on mobile devices and desktop browsers.

SkinWise AI is designed to make AI-generated skin insights more approachable and useful. Its results are cosmetic estimates, not a medical diagnosis.

How I built it

I built SkinWise AI as a full-stack web application using HTML, CSS, and JavaScript for the frontend, with Node.js and Express handling backend requests.

The YouCam Skin Analysis API powers the core skin-analysis workflow. MediaPipe Tasks Vision supports face detection in the guided selfie-capture experience, while Chart.js creates visual representations of the results. Browser localStorage is used to keep analysis history available on the user's device.

I connected the frontend to the backend, configured the API integration, tested the analysis workflow, and deployed the application on Render. I also published the source code on GitHub so the project can be explored and reviewed.

Challenges I ran into

One of the biggest challenges was connecting the different parts of the application into a reliable workflow. The photo-capture experience needed to support face positioning, while the backend had to communicate with the YouCam API and handle the analysis process before returning results to the interface.

I also worked through deployment configuration issues, API-key setup, and the integration of the charts, analysis history, routine builder, and reports. Testing these features helped me identify problems and improve how the application responds to users.

Working through these challenges taught me that building an AI-powered application involves more than connecting an API. The complete user experience, error handling, security, and testing are equally important.

Accomplishments that I am proud of

I am proud to have developed and deployed a working application that connects AI skin analysis with visual analytics and practical skincare planning.

Some of the accomplishments I value most are:

• Integrating the YouCam Skin Analysis API into a functioning web application.
• Building a dashboard that presents analysis results in visual form.
• Adding analysis history and comparison features.
• Creating a routine builder that considers user-selected goals, sensitivity, and budget.
• Developing a guided selfie-capture experience with face-detection support.
• Deploying a live demo and publishing the source code publicly.

Most importantly, I turned an idea into a working project that people can explore and test.

What I learned

Building SkinWise AI strengthened my understanding of full-stack development, API integration, asynchronous processing, frontend and backend communication, data visualization, and deployment.

I also learned the importance of making AI results understandable, designing for mobile users, handling errors carefully, protecting API credentials, and communicating the limitations of AI-generated cosmetic estimates.

The project reinforced my belief that technology becomes more valuable when it helps people understand information and use it to make better-informed decisions.

What's next for SkinWise AI

The next stage is to improve the experience and expand its usefulness. Potential improvements include clearer progress trends across multiple check-ins, more personalized skincare guidance, and skincare product discovery that connects users' goals with relevant products.

I would also like to explore eCommerce integrations and virtual try-on capabilities as future enhancements, while continuing to improve usability, privacy, and responsible use.

SkinWise AI is an ongoing learning and innovation project. This hackathon has given me an opportunity to explore how AI can support more accessible, personalized beauty technology.

Built With

• ai
• api
• chart.js
• css
• express.js
• html
• javascript
• localstorage
• mediapipe
• node.js
• render
• youcam