DermShield

The anti-routine skincare engine: know what to pause, not what to buy.

Comment

Inspiration

The skincare industry pushes 10-step routines with harsh acids and retinoids. When products cause chemical burns, redness, and barrier breakdown, brands tell users to buy more expensive creams. We built DermShield as an anti-routine reset engine: an elimination diet for your face that diagnoses damage, pauses culprits, and unlocks low-cost pharmacy staples.

What it does

  • Barrier Triage: Analyzes selfies to measure Erythema/Redness ($R$), Texture/Flaking ($T$), and Moisture ($M$).
  • Multimodal Bottle Auditing: Uses Google Gemini 1.5 Flash to read bottle labels via OCR, parse active ingredients, and flag harmful products against current irritation levels.
  • Deterministic Scoring & Recovery Tracking: Synthesizes symptoms into a single Shield Score ($S$) and models safe product reintroduction day by day.
  • Gated Safe Store: Locks active serums until redness subsides ($R < 35$), then unlocks bio-equivalent pharmacy alternatives (₹150–₹350) that replace ₹1,500+ commercial brands.

How we built it

  • Frontend: Next.js App Router, TypeScript, and Tailwind CSS across modular routes (/scan, /audit, /track, /store).
  • State Management: A global SkinContext synced with localStorage keeps data persistent across page reloads and transitions.
  • Scoring Formula:

$$S = 100 - \left( 0.50 \cdot R + 0.30 \cdot T + 0.20 \cdot (100 - M) \right)$$

  • AI Pipeline: Serverless Gemini 1.5 Flash endpoint enforcing strict JSON schemas to extract and categorize active chemical compounds from curved packaging.

Challenges we ran into

  • Decoupling Symptoms from Causes: A photo only shows physical irritation ($R, T, M$), not bathroom shelf inventory. We split the flow: computer vision measures barrier health, while Gemini independently audits product labels to pinpoint culprits.
  • Demo Reliability: Live cameras fail on venue Wi-Fi. We engineered an instant "Try Demo Profile" toggle to simulate an acute retinol burn ($S = 24$) with zero latency.
  • Hydration Mismatches: Resolved SSR cache conflicts in Next.js by adding an explicit client mounting lifecycle guard.

Accomplishments that we're proud of

  • Sub-8s Multimodal OCR: Gemini Flash accurately extracts tiny, curved INCI ingredient text without hallucinating.
  • Anti-Commerce Gating: Prioritizing healing over selling by locking the marketplace until barrier metrics stabilize.
  • Consumer-First Language: Replaced confusing skincare jargon with simple, quantifiable metrics.

What we learned

  • Telling users what not to buy builds far more trust than recommending more routines.
  • Multimodal LLMs vastly outperform traditional OCR on curved, glossy cosmetic packaging.
  • Exposing the price gap between ₹185 generic pharmacy staples and ₹1,500 commercial brands delivers instant, tangible value.

What's next for DermShield

  • Cross-Bottle Interaction Engine: Flagging conflicts when two separate safe products interact poorly together.
  • Live Pharmacy APIs: Real-time stock and price sync with Tata 1mg, Apollo Pharmacy, and Netmeds.
  • Derm Summary Export: One-click PDF report of barrier recovery history for doctor consultations.

Built With

  • aiagents
  • computervision
  • contextapi
  • css3
  • dermatology
  • geminiflash
  • googlegemini
  • healthtech
  • html5
  • javascript
  • localstorage
  • multimodalai
  • nextjs
  • node.js
  • ocr
  • promptengineering
  • react
  • restapi
  • skinapi
  • tailwindcss
  • typescript
  • vercel
  • youcam
  • youcamskinai
Share this project:

Updates

Submission history