DermaLoop

🌿 DermaLoop turns AI skin insights into a personal journey—track changes, understand patterns, and make thoughtful skincare decisions. ✨

Comment

🌿 DermaLoop — Your Skin Has a Story. Not a Score.

Change less. Choose better.

💡 Inspiration

Imagine taking a selfie and being told your skin has a score of 68.

Sixty-eight?!

Should you celebrate? Panic? Buy seventeen serums and apologize to your forehead?

The problem isn't the number. It's everything the number doesn't tell you.

What if the lighting changed? What if you recently switched moisturizers? Does a higher score mean your routine actually worked?

We noticed that most AI skincare experiences focus on analyzing skin rather than helping people understand the results.

And in a world constantly encouraging us to buy something new, we wondered:

What if the smartest skincare decision is sometimes to change nothing at all?

That's how DermaLoop began—a gentle, privacy-conscious skincare companion that values understanding over perfection. 🌱

✨ What it does

DermaLoop transforms AI skin measurements into a thoughtful journey through four connected experiences.

🔬 Skin Atlas — Meet Your Skin

Explore skin measurements through beautiful interactive charts, historical readings, and accessible data tables. Instead of treating scores as judgments, Skin Atlas presents them as observations.

📈 Signal vs. Noise — Question the Numbers

A score increases by four points. Amazing! Your moisturizer must be magical!

Or… perhaps the lighting changed.

Signal vs. Noise compares compatible readings while highlighting photography conditions and measurement uncertainty. It reminds users that a numerical change doesn't automatically prove a skincare improvement.

🧪 Routine Lab — Change One Thing. Learn a Little.

Document skincare experiments, record routine changes, and maintain a journal of observations.

Rather than changing five products at once, users can track one thoughtful adjustment and give it time.

💭 Decision Studio — Choose With Intention

Before purchasing another product, users can explain what they're considering.

DermaLoop examines available readings and routine context to create transparent, rule-based decision cards with understandable reasoning.

Sometimes, its most useful suggestion is simply:

"You might not need anything new right now."

✅ Genuine YouCam AI Integration

DermaLoop integrates Perfect Corp's YouCam Skin Analysis V2.1 API, supporting acne, pores, texture, and redness measurements.

We successfully completed a real API workflow involving authenticated file registration, secure image upload, asynchronous analysis, polling, and result normalization.

Our public Verified Integration page displays genuine YouCam measurements obtained from an AI-generated synthetic portrait.

The interactive sample journey uses clearly labeled fictional data. Public live scanning is intentionally disabled, protecting user privacy and API credits while allowing visitors to explore the complete experience.

🛠️ How we built it

DermaLoop uses Next.js, React, TypeScript, and the YouCam Skin Analysis API V2.1.

We built a custom editorial interface using CSS, SVG illustrations, and subtle animations. IndexedDB provides private browser-local storage, while deterministic logic powers comparisons and explainable decisions.

Testing uses Vitest and Playwright, with deployment on Vercel and source code hosted on GitHub.

🎨 Living Editorial

We wanted DermaLoop to feel like a botanical journal rather than a clinical dashboard.

Warm cream backgrounds, sage-green accents, expressive typography, animated charts, and gentle interactions create a calm, distinctive identity.

We even added a tiny animated cassette player 📼 featuring Morning Stillness, an original AI-generated ambient composition.

Accessibility was equally important, with reduced-motion support, keyboard navigation, contrast preferences, and responsive layouts.

🧩 Challenges we ran into

📸 When HTTP 200 Wasn't Enough

Our first real YouCam integration test was a plot twist.

File registration worked. Upload succeeded. Task creation returned HTTP 200.

And then… the actual analysis failed.

After investigating, we suspected the face occupied too little of the image. We carefully reframed the same synthetic portrait and conducted another separately authorized test.

This time, it worked! 🎉

YouCam successfully returned all four requested measurements.

Although the original failure's exact cause remains unknown, we learned how important image preparation, error handling, and genuine provider testing are.

🔐 Protecting Privacy and API Credits

We wanted to demonstrate working AI without exposing API credentials or allowing uncontrolled public usage.

We separated the public demo from live analysis, enforced strict request safeguards, and developed a secured local testing workflow.

📊 Making AI Insights Trustworthy

A beautiful chart can still be misleading.

We carefully distinguished fictional data from genuine measurements, raw scores from UI-adjusted scores, and observed changes from proven outcomes.

DermaLoop emphasizes transparency rather than exaggerated conclusions.

🏆 Accomplishments that we're proud of

  • ✅ Verified real YouCam integration: Successfully obtained acne, pore, texture, and redness measurements.
  • 🌿 Complete skincare journey: Four interconnected features that turn measurements into more meaningful decisions.
  • 🎨 Distinctive UI/UX: Original illustrations, Living Editorial styling, gentle animations, and a miniature music cassette.
  • 🔐 Privacy-first architecture: Browser-local notebooks, export/delete controls, and protected API credentials.
  • ♿ Accessibility: Reduced motion, keyboard navigation, contrast preferences, and mobile support.
  • 🧪 Extensive testing: The published release passed 244 unit tests and 43 browser tests, with further local security development tested separately.
  • 🚀 Public deployment: A working interactive experience on Vercel with genuine read-only API verification evidence.

📚 What we learned

Our biggest lesson was that connecting an AI API is only the beginning of building a useful AI product.

Meaningful experiences require context, trustworthy interpretation, careful engineering, and thoughtful design.

We learned that successful HTTP requests don't guarantee successful AI analysis, that privacy should influence architecture from the beginning, and that explaining uncertainty is often more valuable than presenting another confident score.

We also discovered that small details—a gentle animation, a reassuring message, or a quiet cassette melody—can make technology feel more human.

Most importantly, a responsible recommendation doesn't always have to recommend something new.

🚀 What's next for DermaLoop

We're excited to explore:

  • 🌱 More real-world usability testing with consenting adults.
  • 📈 Better longitudinal comparisons and capture consistency.
  • 🧪 Richer skincare routine journals and observations.
  • 🔐 Carefully controlled public live analysis with durable quotas and abuse protection.
  • ♿ Broader accessibility and cross-browser testing.

Public live scanning remains future work; our submitted experience focuses on a complete sample journey and verified integration evidence.

Above all, we want DermaLoop to remain calm, honest, and empowering.

💚 One Last Thought

DermaLoop started with a simple question:

What if skincare technology helped people feel more informed instead of more insecure?

We built something that listens to the numbers, questions the noise, remembers the context, and encourages thoughtful decisions.

Not every change needs fixing.

Not every question needs another purchase.

🌿 DermaLoop — Change less. Choose better.

Because your skin has a story. Not a score.

Built With

Share this project:

Updates

Private user

Private user posted an update —

DermaLoop — Development & API Access Update

DermaLoop is now publicly available at https://derma-loop.vercel.app!

To help developers explore the real YouCam Skin Analysis integration, we've included a local setup guide in our GitHub repository: https://github.com/mridul12-cat/DermaLoop

The guide explains how to configure your own API credentials and run live analysis locally with appropriate consent and safeguards.

Why is public live scanning disabled?

To protect our limited API credits from uncontrolled usage, live analysis is intentionally disabled on the deployed website.

However, our Verified Integration page displays genuine YouCam API measurements from a successful image test, while the complete interactive sample journey remains available to everyone.

Submission history