Inspiration
Most skincare shopping sits between two frustrating extremes: fear-mongering "clean beauty" toxicity scores that penalise safe, well-studied ingredients without context, and glossy marketing claims ("clinically proven," "non-comedogenic," "dermatologist-loved") that push endless 10-step purchases without telling you whether a formula actually fits your skin or clashes with products you already own.
Meanwhile, AI skin scanners often operate like black boxes—asking users to upload sensitive facial portraits only to funnel them toward opaque affiliate recommendations.
We built Dew & Form ("Find your skin's kind of care.") to offer a calmer, high-trust alternative: an editorial skincare intelligence studio that pairs Perfect Corp YouCam AI Skin Analysis (S2S v2.1) with 35 documented CosIng / CIR / EU Annex ingredient monographs and the open Open Beauty Facts (ODbL) cosmetic INCI registry—grounded in strict scientific honesty rather than hype.
What it does
- 5-Step Interactive Studio Onboarding & Guided Discovery: Welcomes first-time visitors with a non-blocking, keyboard-accessible modal tour over a blurred editorial canvas, plus a gentle sage-highlighted Take a Tour replay control in the header.
- Privacy-First AI Skin Observation (
YouCam S2S v2.1): Analyses user-uploaded portraits across opticalskin_type,oiliness, andacne/blemish signals via a strict server-side proxy, translating raw readings into calm cosmetic Routine Themes (Barrier Support, Sebum & Pore Refinement, Gentle Blemish Care, Balanced Hydration) and automatically filtering matching formulations. - Dew & Form Product Check (Multi-Source Suitability Engine): Evaluates any skincare product—via Open Beauty Facts catalogue/barcode search, HTTPS product page URL extraction, manual INCI entry, or packaging label photo upload with an interactive magnification loupe—returning one of three transparent verdicts:
- Good potential fit — well-supported INCI actives align with your skin profile and goals with no flagged sensitizers.
- Some concerns — flags personal allergens, EU Annex III fragrance allergens (Parfum, Linalool, Limonene), drying alcohols, contradicted marketing claims, or routine active stacking.
- Not enough information — refuses to guess when complete packaging INCI lists, active concentrations, or pH data are unavailable.
- Marketing Claim Substantiation: Cross-checks front-of-box promises ("fragrance-free", "alcohol-free", "non-comedogenic", "clinically proven") against actual INCI declarations, explaining the difference between ingredient-level monograph data and finished-formula clinical trials.
- Side-by-Side Formulation Comparison: Compares 2–3 products across contextual personal fit, distinctive vs. shared INCI ingredients, sensitivity flags, and verified data completeness—never fabricating retail prices or star ratings.
- Persistent, Conflict-Aware "My Routine" (
AM/PM): Lets users build morning and evening routines around products they already own alongside verified catalogue items, catching active layering conflicts (such as same-night AHA/BHA exfoliant + retinoid stacking or missing daytime broad-spectrum SPF).
How we built it
- Frontend & Editorial Design System: Built with Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS, and Radix UI primitives (
Dialog,Tabs,Collapsible,Tooltip). Styled around a warm apothecary palette (DM Serif Display,Geist Sans,Geist Mono) with full WCAG keyboard navigation andprefers-reduced-motionsupport. - Server-Proxied YouCam AI Skin Analysis v2.1 Pipeline:
- Pre-validates portrait uploads on the server by inspecting binary JPEG/PNG magic bytes and pixel dimensions (
src/lib/youcam/image-inspector.ts). - Executes Perfect Corp's 3-step S2S flow strictly server-side (
import "server-only"):POST /s2s/v2.0/file→ pre-signed binaryPUT→POST /s2s/v2.1/task/skin-analysiswith homogeneousdst_actions(skin_type,acne,oiliness). - Protects task polling (
GET /s2s/v2.1/task/skin-analysis/{taskId}) with HMAC-SHA256 session-bound cookies and signed task tokens (src/lib/youcam/security.ts), ensuring one user session can never poll another user's scan task and transient network hiccups resume polling the existing task without creating duplicate paid API calls.
- Pre-validates portrait uploads on the server by inspecting binary JPEG/PNG magic bytes and pixel dimensions (
- Open Beauty Facts (ODbL) Live Registry & Data Hygiene: Connects
GET /api/productstoworld.openbeautyfacts.org(v2indexed ingredient/category queries,/cgi/search.plkeyword search, and EAN/UPC barcode lookup), normalising messy crowd-contributed INCI strings by stripping batch codes, multilingual disclaimers, and non-skincare entries while gracefully falling back to reference archetypes if offline. - Deterministic Monograph & Suitability Engine: Powered by 35 curated European Commission CosIng / CIR / EU Regulation (EC) No 1223/2009 Annex monographs (
src/lib/ingredients/catalog.ts). Rather than inventing an arbitrary \(0\text{–}100\) "clean score," our evaluator (src/lib/product-check/evaluator.ts) models verdict confidence as an explicit function of verified ingredient evidence \(E\), personal sensitivity & routine-conflict flags \(C\), and INCI data completeness \(D\):
$$\text{Verdict}(E, C, D) = \begin{cases} \text{Not enough information} & \text{if } D < D_{\min} \ \text{Some concerns} & \text{if } |C| > 0 \ \text{Good potential fit} & \text{if } D \ge D_{\min} \land |C| = 0 \land |E_{+}| > 0 \end{cases}$$
- SSRF-Hardened URL & Label Inspection:
POST /api/product-check/extract-urlenforces HTTPS-only fetches, blocks private/loopback/link-local/cloud-metadata IP ranges across every redirect hop, caps payload bytes, and extracts JSON-LDProductschema and INCI blocks for user confirmation before evaluation. - Automated Verification: Backed by 8 Vitest & Testing Library suites (51 automated tests) covering YouCam v2.1 route contracts, HMAC security, normalizers, Open Beauty Facts hygiene, Product Check verdicts, onboarding flows, routine conflict detection, and static OpenGraph rendering.
Challenges we ran into
- Strict YouCam v2.1 Action & Credit Discipline: Perfect Corp's v2.1 API rejects mixed SD and HD
dst_actionsin a single task and meters every task creation. We built strict homogeneous action validation and idempotent client-to-server task resumption so temporary poll timeouts never trigger duplicate paid task submissions. - Real-World Cosmetic Registry Noise: Public Open Beauty Facts records frequently omit retail prices or embed
[PI02017]formula codes,Lote:stamps,-delimiters, and trailing packaging disclaimers insideingredients_text. Writing a sanitiser that cleans INCI lists without hallucinating missing data took careful iteration. - Securing User-Provided Product URLs: Letting users paste any skincare URL creates classic Server-Side Request Forgery (SSRF) risks. We engineered manual redirect-hop inspection with DNS/IP range guards (
127.0.0.0/8,10.0.0.0/8,169.254.169.254, IPv6 ULA/loopback) and strict byte-stream limits. - Designing Honest Guardrails: Resisting the temptation to over-claim was a core design challenge—for instance, INCI lists are ordered by weight above \(1\%\) and rarely disclose exact active percentages or formula pH, so Dew & Form explicitly tells users what can and cannot be known from a label.
Accomplishments that we're proud of
- Shipping an end-to-end live AI + open-data skincare studio that feels like a calm editorial publication rather than a cluttered SaaS dashboard or pushy storefront.
- Building Dew & Form Product Check with four flexible input paths (catalogue/barcode, URL, manual INCI, and label loupe) plus marketing claim substantiation.
- Helping people use products they already own safely through persistent AM/PM routine conflict detection instead of pushing unnecessary consumption.
- Achieving zero TypeScript/ESLint warnings and 51 passing automated tests across API security, normalization, UI flows, and accessibility (
prefers-reduced-motionand keyboard navigation).
What we learned
- Transparency builds more trust than certainty: Explaining why a "non-comedogenic" or "clinically proven" claim cannot be verified from an INCI list alone makes the tool far more credible than pretending an algorithm knows everything.
- Cosmetic chemistry nuances matter in UX: Distinguishing sensitizing Alcohol Denat. from barrier-supportive fatty alcohols (Cetyl, Cetearyl, Stearyl Alcohol) prevents false alarms that plague simplistic ingredient checkers.
- Privacy by architecture: Keeping facial images ephemeral, binding task IDs to HMAC cookies, and storing routines locally in the browser lets users explore sensitive skin concerns without creating an account.
What's next for Dew & Form
- Opt-In Server OCR Provider Connection: Wiring our existing
POST /api/product-check/ocrboundary to a dedicated vision OCR endpoint for one-tap curved-bottle INCI transcription alongside the interactive zoom loupe. - Climate & UV Context: Incorporating optional local humidity and UV index awareness to tailor AM humectant/occlusive weight and sunscreen reminders.
- Expanded Regional INCI Synonym Mapping: Growing our monograph dictionary across Japanese quasi-drug nomenclature and Korean cosmetic functional actives.
- Printable Dermatologist / Esthetician Prep Sheet: Exporting a clean one-page PDF summary of a user's current AM/PM routine and flagged INCI sensitivities to bring to in-person consultations.
Built With
- css3
- html5
- next.js
- node.js
- open-beauty-facts
- perfect-corp
- radix-ui
- react
- rest-api
- tailwindcss
- testing-library
- typescript
- vercel
- vitest
- youcam-api
Log in or sign up for Devpost to join the conversation.