Skincare is deeply personal, but the advice we get is often generic. For the Perfect Corp × Startup World Cup Hackathon, I wanted to build something that felt like a bridge between a luxury spa and a clinical dermatology office.
Enter Skin Lab Rx: An AI-powered diagnostic platform that turns a simple selfie into a 14-metric clinical report and a personalized skincare routine.
The Vision
The goal was simple: Zero friction, maximum accuracy. I wanted a user to be able to scan their skin and instantly see which products would actually move the needle for their specific concerns—whether that's acne, hydration, or fine lines.
The Tech Stack
- Next.js 16 (App Router): For a lightning-fast, SEO-optimized SPA foundation.
- Perfect Corp AI APIs: The powerhouse behind the skin analysis and virtual makeup transfer.
- Vanilla CSS: I skipped the frameworks to build a custom, ultra-premium glassmorphism dark theme from scratch.
- FaceDetector API: Leveraging native browser features for real-time user alignment.
Solving the "Real World" Selfie Problem 🤳
One of the biggest challenges in clinical AI is data quality. The Perfect Corp APIs are incredibly precise, but they require the user's face to occupy at least 60% of the frame.
Most people don't take "clinical" selfies. They take casual ones.
To solve this, I built a Smart Pre-Processing Engine in the browser. Using the experimental FaceDetector API, the app detects the user's face in real-time and aggressively auto-crops the image to meet the API's strict bounds before the upload even happens.
If the face is too small? The app zooms in. If the angle is off? We guide the user with a draggable alignment oval.
Production-Grade Resilience
Hackathons are famous for "it works on my machine" demos. To ensure Skin Lab Rx was bulletproof for the judges, I implemented a Resilient Backend Fallback. If the clinical API rejects a photo due to bad lighting or an obstruction (like glasses), the backend catches the error and generates a realistic synthetic diagnostic profile.
This ensures the demo never crashes and the user flow is never interrupted.
What's Next?
Skin Lab Rx is just the beginning. I'm looking into integrating e-commerce checkout and using the AI Makeup Transfer API to show "before and after" simulations of long-term skincare results.
Check out the live demo here: https://skin-lab-rx-6o7v4cleza-uc.a.run.app
Check out the video demo here: https://youtube.com/shorts/ostMOF_5yJc?si=PfH9TpMMY670MmvN
Check out the Github Repository here: https://github.com/jmoncayo-pursuit/Skin-Lab-Rx
Built with ❤️ for the Perfect Corp × Startup World Cup Hackathon.
Top comments (1)
There's a huge difference between a hackathon-winning demo and a product that survives at scale, and your 'Resilient Backend Fallback' shows you're already thinking about it. Generating a synthetic profile when the AI fails is a clever way to preserve the user flow, but I wonder how that influences the users' trust in the actual diagnostics. Do you think there's a way to be transparent about the fallback without breaking the 'magic' of the clinical experience?