Inspiration
Skincare shopping is guesswork. Labels say "clean" or "dermatologist tested," and most apps give every product one score for everyone. But a cleanser that is fine for one person can wreck another person's skin barrier. I wanted a tool that answers the real question: is this product right for my skin?
Ingryd started as an ingredient scanner. For this hackathon I added YouCam's Skin Analysis API and connected it to everything, so one photo now changes what the whole app shows you.
What it does
- One front photo, up to 15 skin concerns. YouCam's Skin AI reads hydration, oiliness, redness, breakouts, pores, texture, fine lines, dark spots, dark circles, eye bags, under-eye hollows, firmness, radiance and eyelid droop, plus skin type and skin age. Overlays show where each concern was found on your own photo.
- Guided capture. A live checklist checks lighting, glare, framing, head angle, mouth and eyes on the phone before anything is uploaded, then auto-captures. Group shots and non-faces never cost an API call.
- "What the scan can't see." A front photo can't show the jawline, temples or neck, so you can add concerns there yourself.
- Fit Score. Every product gets a transparent General ingredient score. Your scan and profile then adjust it into a Fit score for you. Each deduction is explained, EU-banned substances are flagged, and a "How we score" panel shows the rubric.
- Routine check. It compares your routine with your scan: what is working, what works against you, and which weak spots nothing covers.
- Barcode and ingredient-label scanning for products in a store. If no database has the ingredient list, the app says so and asks for a photo of the label instead of guessing.
- Recommendations and buy links. Better-fit picks ranked by your Fit Score. Buy links never change a score.
How we built it
- Frontend: React, TypeScript, Vite and Tailwind as an installable PWA on Vercel.
- Backend: FastAPI on Render. The YouCam key lives only on the server.
- Data and auth: Supabase for the ingredient catalog, row-level security and sign-in (email and Google).
- YouCam flow: upload, analysis task, poll. The photo is cropped to the face and downsized in the browser, then re-encoded server-side, so uploads are faster and location data is stripped.
- Scoring engine: rules-based and explainable. A scan scales each ingredient adjustment by how weak that concern scored (about 0.5x to 1.6x).
- Barcode lookup: our catalog first, then Open Beauty Facts, then name lookup. Community-submitted products are reviewed before they are shared.
- Tested: backend unit tests and browser-driven end-to-end checks.
Challenges we ran into
- YouCam only accepts straight-on faces. I first built a guided 3-angle scan (front, left, right). Live testing showed YouCam rejects even a slight head turn (
error_large_face_angle). I rebuilt the flow around a single front photo and added the "can't see" step for the areas it misses. - Fallbacks that don't hide real problems. If YouCam rejects the extended concern set, the app retries with the core set, but only disables the extras if the core set then succeeds. Photo problems now show YouCam's real reason (tilted, too small, too dark) instead of a vague error.
- Cost control. Each photo uses API units, so the app has per-user and global caps, consent before upload, and a sample mode.
- Honest scoring. Many products tied at 100, so I added a soft cap. Early users also read a general score as personal, so the app now labels General vs Fit and explains how to personalize.
- Messy catalog data. Products with no barcode or ingredient list needed name-based lookup and a review queue.
Accomplishments that we're proud of
- A working product, live on the web, built end to end by one person: scan, score, routine check and recommendations.
- A scan flow that stops bad photos before they cost anything, with a live checklist instead of a vague "try again."
- Scores that explain themselves. Every deduction has a reason, and the app is open about what it can't see.
- Catching a wrong design assumption (side photos) from live logs and rebuilding the flow around what the API really supports.
What we learned
Test the API's real limits early, because my side-photo design was wrong until live logs showed why. Show users why a number is what it is. And a good scan is mostly good photo guidance.
What's next for Ingryd
- Scan history and progress tracking over time.
- A plain-language explainer grounded in the scores.
- A Plus plan (planned, not launched) to fund face scans, with a waitlist survey already live.
- A Fit Score widget for retailers and brands, so skin-matched scores appear on product pages.
- Higher scan accuracy, and a larger catalog.
Ingryd is not a medical device and does not diagnose. Your photo is sent to YouCam for analysis and is not kept by Ingryd.
Built With
- face-api-js
- fastapi
- google-oauth
- httpx
- open-beauty-facts
- postgresql
- pwa
- python
- react
- render
- supabase
- tailwind
- tailwindcss
- tesseract
- typescript
- vercel
- vite
- youcam
- youcam-skin-analysis-api
Log in or sign up for Devpost to join the conversation.