Inspiration
Skincare shopping is broken in a specific way: you either trust an influencer's word for it, or you scroll through ingredient lists you can't parse, on products picked for reasons that have nothing to do with your actual skin. I wanted something that starts from the problem — "I keep getting pimples on my chin," "My skin tans badly," "my scalp is always flaky", — and works backwards to a real product, with nothing hidden about what's in it.
What it does
Skinly is a skincare and personal-care discovery app built around three things:
- Concern-based matching — describe what's going on with your skin or hair in plain language, and an AI-powered recommendation engine matches you to real products from a curated catalog, with reasoning for why each one fits.
- Ingredient transparency — every product shows its full ingredient list, rendered like an actual product label, with key actives called out and explained in plain terms.
- Price-drop alerts — add something to your cart, and Skinly keeps watching it. The moment the price drops, you get notified, so you're not stuck guessing when to buy.
Every product also links out to real Amazon, Flipkart, and Myntra search results, so you can act on a recommendation immediately, not just browse it.
How I built it
The app is a Next.js (App Router) project. The concern-matching agent runs on Groq's API using Llama 3.3 70B — it takes the user's free-text concern, reasons over a structured product catalog, and returns ranked matches with an explanation. The product catalog itself is a hand-curated set of ~30 skincare/personal-care products with real-style ingredient lists and skin-concern tags, since no public API exists for this kind of structured, ingredient-level product data.
Price tracking is a deterministic simulated pricing engine — there's no public API for live retailer prices either, so instead of faking realism by scraping (fragile, against most retailers' terms, and out of scope for the timeframe), prices move on a seeded, time-based schedule and the app is explicit in the UI that this is a demo pricing layer, with real store links provided for actual purchases.
Design-wise, I leaned into the idea of skincare as something you read — warm paper background, an editorial serif for headings, and ingredient lists that look and read like real product labels throughout the app, since that's the thing Skinly actually cares about.
Challenges I ran into
Getting the recommendation agent to be honest when nothing in the catalog actually fit a concern, instead of forcing a weak match, took some prompt iteration. The other real challenge was scope: it would have been easy to spend the whole build trying to wire up real scraping or real commerce APIs that don't actually exist in usable form for this — the harder, more useful decision was to build a clearly-labeled simulation and spend the saved time on the parts that are real: the matching agent, the ingredient data, and real links to actual stores.
What I learned
Mostly about scoping under a hard deadline — building backward from "what can genuinely ship and work" rather than "what would be cool if everything went right." Also a lot about prompting an LLM to do structured catalog matching reliably, and returning clean JSON without it wandering into prose.
What's next for Skinly
- Real per-product match reasoning shown on every recommendation, not just an overall summary
- A larger, more diverse product catalog
- A genuinely live price-tracking layer once a workable data source exists
- Saved skin/hair profiles so recommendations get smarter over repeat use
Built With
- groq
- llama-3.3-70b
- next.js
- novus
- react
- tailwind-css
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.