DERMALENS

Turn YouCam Skin AI results into a skincare routine you can understand.

Comment

Inspiration

Skincare shoppers often encounter confusing product claims and numerical skin scores without a clear explanation of what those results mean or what to do next. I built DERMALENS to bridge that gap: transform skin-analysis results into understandable, transparent skincare guidance without pretending that an AI score is a medical diagnosis.

What it does

DERMALENS combines YouCam Skin AI with an explainable skincare-routine experience.

  • Live skin analysis: Users can upload a photo for analysis through the YouCam Skin AI API.
  • Four concern categories: Explore pores, skin texture, wrinkles, and acne/blemishes.
  • Visual evidence: Inspect the returned concern masks using the original image, overlay, and comparison views.
  • Evidence Trail: See the information returned by YouCam, how DERMALENS interprets it, how the routine responds, and what remains uncertain.
  • Goal- and sensitivity-aware routines: Choose skincare goals and routine preferences. Sensitivity settings suppress optional exfoliating actives when appropriate.
  • Product discovery: Explore a curated product shortlist with links to official product information. Prices and regional availability are not presented as verified.
  • Routine Passport: Review and print a summary of the routine and its supporting explanations.

How it works

A selected image is prepared for the API, then processed through a server-side function that keeps the YouCam API credential out of the browser. DERMALENS uses the returned analysis and concern masks to populate the results experience.

The app distinguishes YouCam's returned scores from its own interpretation. Higher YouCam health scores indicate healthier skin. DERMALENS calculates a focus estimate as 100 minus raw_score; this is only a prioritisation hint, not a clinical severity score or a prediction of treatment success.

The Try the demo button loads a clearly labelled saved sample from a previous successful YouCam analysis. It does not make a new API request. Analyze my photo is the live-analysis path.

How I built it

I built DERMALENS as a solo project using React, TypeScript, Vite, Tailwind CSS, Supabase infrastructure, and the YouCam Skin AI API. The project focuses on more than displaying scores: it connects model output to visual evidence, transparent explanations, routine choices, and product-information links.

Challenges and lessons learned

One challenge was image quality. Some test images returned provider errors related to face size or face angle. I added photo guidance and clearer failure handling rather than presenting failed requests as successful analyses. A saved sample also makes the results experience available to explore without requiring a fresh API request.

I learned that a useful AI experience needs to communicate both what the model returned and what the application derives from it. Keeping those two things separate makes the experience easier to understand and its limitations easier to see.

Responsible use and limitations

DERMALENS is an educational skincare companion, not a medical diagnostic tool. Its focus estimate is a prioritisation aid, not a clinical assessment. Product effectiveness is not guaranteed, and live regional prices and availability are not verified. Live image analysis sends the selected photo to YouCam for processing; users should review the in-app privacy notice before uploading a photo.

The project is a functional prototype. It does not claim clinical validation or proven consumer outcomes.

Built With

  • artificial-intelligence
  • beauty-tech
  • e-commerce
  • javascript
  • personalization
  • react
  • skin-analysis
  • skincare
  • supabase
  • tailwind-css
  • typescript
  • vite
  • youcam-api
Share this project:

Updates

Submission history