OurSkinOurFuture

AI scans your skin, matches real products by ingredient — your personalized skincare protocol in 60 seconds.

Comment

Inspiration

Skincare decision-making runs on anxiety, not evidence. Someone breaks out, panics, buys a $50 serum on a TikTok recommendation, and three weeks later has no idea whether it's actually working or if their skin was going to heal on its own anyway. Every skincare app on the market answers the wrong question — they tell you what's wrong right now with a wall of numbers, but nobody answers the one question that actually drives behavior change: "If I stay consistent, what will my face look like in four weeks?"

That's a fundamentally different product. Diagnosis is a snapshot. What we wanted to build was a time machine — something that could take a single selfie and show someone, visually and viscerally, the version of their skin that consistency produces. Not a percentage. Not a chart. A face they could watch heal.

What it does

OurSkinOurFuture is a predictive clinical skincare diagnostic and visual treatment simulator that turns a single selfie into a 4-week interactive forecast of your skin's healing trajectory.

  • Frictionless capture — a front-facing selfie validated in real time for lighting, angle, and facial positioning before it ever hits the diagnostic pipeline.
  • Clinical-grade multi-concern diagnostic — powered by YouCam's dermatologist-trained infrastructure, analyzing 10+ distinct skin concerns (active acne, redness index, wrinkles, texture, pores, dark circles) alongside Fitzpatrick skin typing and undertone metrics.
  • The Visual Time-Machine — the core of the product. Instead of static before/after images, a custom HTML5 Canvas engine interpolates your real baseline selfie with YouCam's simulated healing output. Drag a slider across Day 1 → Week 1 → Week 2 → Week 4 and watch your own face — acne clearing, redness fading — at a smooth 60fps.
  • Agentic clinical coach — an LLM agent reads your live diagnostic metrics and generates a personalized AM/PM routine, matching specific concerns to specific ingredients (e.g., a high redness score triggers targeted Niacinamide protocols) instead of generic "drink more water" advice.
  • Longitudinal tracking — every scan persists to Supabase, so returning users see real week-over-week healing percentages, not just isolated snapshots.

How we built it

  • Frontend & UX: Next.js 14 (App Router), Tailwind CSS, and Framer Motion — tuned for high-performance responsiveness across desktop and mobile.
  • Skin Intelligence Layer: YouCam Skin AI REST APIs integrated server-side via Next.js Route Handlers (app/api/analyze/route.js), so API keys never touch the client while multi-part image buffers are handled securely.
  • Visual Blend Engine: A custom client-side HTML5 Canvas system that calculates mathematical decay curves across YouCam's numerical metrics and blends image layer opacities in real time — rendering seamless, frame-by-frame 4-week visual projections without pre-rendered video assets.
  • Agentic AI Layer: A server-side streaming pipeline using Qwen (DashScope) that turns raw diagnostic JSON into human-centric skincare narratives and ingredient guidance — the difference between "redness index: 0.72" and "your skin is telling you it needs a barrier-repair week."
  • Database & Persistence: Supabase (PostgreSQL + Storage) with Row Level Security, handling auth, high-density facial scan history, and encrypted asset storage.

Challenges we ran into

  • High-density facial API pipelines: our first attempts at image transformation caused framing conflicts and resolution loss on dispatch — the kind of quiet bug that silently degrades diagnostic accuracy without ever throwing an error. We solved it by engineering a dedicated server-side ingestion pipeline with Node.js sharp to preserve raw pixel density before payloads ever reached YouCam's endpoints.
  • Simulating smooth temporal transitions with no native support for it: YouCam's API gives you high-precision baseline and target states — but nothing frame-by-frame in between. There's no "week 2.5" endpoint. Rather than falling back to static before/after images (what every competitor does), we built a client-side dual-state canvas opacity and filter blender that interpolates numerical scores and visual layers in sync, live, at 60fps, with zero extra network calls.
  • Auth redirects across serverless environments: getting Supabase Auth to behave identically between local dev and Vercel edge deployments required custom Next.js middleware for seamless token refresh — the unglamorous infrastructure work that nobody notices until it breaks.

Accomplishments that we're proud of

  • A zero-mock production pipeline — we didn't demo wireframes and simulated data. Every layer, from YouCam's diagnostic API to Supabase persistence, is live and production-grade.
  • The Visual Time-Machine Slider — this is the moment the product stops being "another skincare app" and becomes something people want to show their friends. It's the single feature that makes a probabilistic forecast feel like proof.
  • Real beta validation — we deployed to actual beta users and ran structured surveys, not just internal testing. [Insert your real N here — e.g. "Across N beta testers, X% reported the visual time-machine significantly increased their confidence in their routine."]
  • Architectural cleanliness under time pressure — complex API polling, image buffering, and LLM streaming, all abstracted into clean, modular Next.js route handlers, built and shipped inside a hackathon timeline.

What we learned

  • Diagnostic numbers don't change behavior — visual proof does. Consumers don't want raw metrics; they want a reason to believe consistency is worth it, and a slider they can drag is a more persuasive argument than any percentage.
  • The gap between generic CV and clinical-grade CV is not incremental, it's categorical. Working with YouCam's dermatologist-trained infrastructure made it obvious how much accuracy gets left on the table by generic vision models — this isn't a "fine-tune a model" problem, it's an "access the right data" problem.
  • Early, structured user feedback reshapes the product, not just the polish. Beta tester surveys didn't just validate what we built — they directly reshaped the camera capture flow and UI responsiveness before we considered this launch-ready.

What's next for OurSkinOurFuture

  • Live environmental context — location-based weather API integration to dynamically adjust daily SPF and antioxidant recommendations based on real-time UV index and air quality, so the routine reacts to the world, not just the face.
  • Diagnostic zone heatmaps — interactive canvas toggles letting users click specific facial zones (T-Zone, cheeks) to view targeted sebum and redness heatmap overlays.
  • Retail integration — direct one-click product cart additions with beauty brand partners, matched to diagnostic ingredient recommendations. This is also the monetization path: the Time-Machine slider isn't just a retention feature, it's a conversion engine.
  • Exportable derm consultation briefs — a 1-page auto-generated PDF summarizing historical trends and clinical metrics, turning the app into something people bring into a real dermatologist's office, not something that competes with one.

Built With

Share this project:

Updates