SkinMatcher
SkinMatcher is an independent, cross-brand skincare matching product site. It captures early interest through a waitlist form backed by Supabase and presents users with quiz app where they get personalized routines from 300+ products across 25+ brands.
The problem
Skincare consumers in Europe are not short of information, we have a lot of tools available such as ingredient scanners, brand quizzes, review platforms, and thousands of hours of creator content explaining and recommending different products.
So when people talk about the ‘skincare problem,’ they usually mean an information problem. But I think the information problem is basically solved or even overcrowded. That’s not where the pain is anymore; what’s actually unsolved is the decision.
Once you’ve filtered out the ‘bad’ ingredients, you’re left alone with the question that actually matters: will this specific product work for MY skin, MY budget, and the way I want my skin to feel? No tool answers that reliably. And we have a growing pile of tools that score a given product but never tell you what to actually buy instead.
What I built
I organized the prototype around two layers. The first is acquisition and onboarding: this is the stuff that pulls people in and activates them.
- A concern-based quiz that sorts you into one of 7 skin archetypes
- Archetype engine mapping answers to identities
- Results carousel with “why this matches you” on every product
- Shareable skin-profile cards for social media
- A catalog of ~300 curated SKUs across 5 retailers in Germany
- GDPR consent layer as a trust signal
The second layer is retention and discovery, these are the users’ reasons to come back:
- A personalized catalog where every product shows a live match score against users profile
- An editorial section that contains product links back to the catalog
Technical highlights
- React 18 + Vite 5 + TypeScript: fast HMR dev loop, strict typing across quiz answers, archetypes, and product catalog; lazy-loaded routes keep the initial bundle lean
- Static product catalog as a typed record: 300+ products across 25+ brands modelled as
Record<id, IProduct>insrc/data/products.ts, filterable by skin type, concerns, actives, and values without a backend round-trip - Session-persistent quiz state: useQuizState hook hydrates from sessionStorage so refreshes and back-navigation never lose progress; reveal/profile phases are excluded from persistence to avoid stale results
- SEO + AEO-ready: per-page react-helmet-async meta, JSON-LD, prerendered routes via scripts/prerender.ts, semantic HTML, sitemap.xml and llms.txt shipped in public/
- GDPR-aware analytics: GA4 events gated behind a useConsent cookie banner; quiz funnel, slide views, and feedback submissions tracked only after opt-in