DermaSync: Your Personal AI Dermatologist

Inspiration

Have you ever bought a highly-rated skincare product, only to wake up the next morning with a massive breakout or a damaged skin barrier? The skincare industry is overwhelming and saturated with complex chemical formulations. Consumers are expected to blindly guess which ingredients will react well with their unique skin, often leading to wasted money and ruined skin barriers. We wanted to take the guesswork out of skincare by building an AI-powered dermatologist that lives in your pocket.

What it does

DermaSync uses advanced Computer Vision and Large Language Models to instantly determine if a skincare product is safe for your exact skin profile before you buy it.

Selfie Analysis: Upload a quick selfie, and our vision model analyzes your skin type, hydration levels, and active concerns (like acne or sunspots) in real-time. Live Scraping: Paste a product link from Sephora or Ulta (or just type a popular product name), and we dynamically scrape the live ingredient list. Clinical Scoring: The AI cross-references the chemical formulation against your unique skin profile to generate a personalized compatibility score, flag dangerous ingredients (like comedogenic esters for acne-prone skin), and provide a brutally honest clinical analysis.

How we built it

Frontend: Built with Next.js and React, featuring a sleek, premium dark-mode Glassmorphism UI powered by Framer Motion for butter-smooth animations. Backend: Serverless API routes hosted on Render. AI Engine: We leveraged the lightning-fast Groq inference engine, specifically utilizing the Qwen 3.6 27B Vision model. We used it for both the computer vision analysis of the selfie and the deep medical reasoning over the ingredient lists. Web Scraping: We integrated the Firecrawl API to dynamically scrape live product formulations directly from retailer URLs.

Challenges we ran into

The JSON Prompt Paradox: When forcing a reasoning model (Qwen) to output strict JSON, we initially tried forbidding it from using its tags. This created an "AI Paradox" where the model spent thousands of tokens secretly reasoning about how it was forbidden from reasoning, violently hitting token limits and crashing the JSON parser! We solved this by removing the restriction, letting the model think naturally, and writing a custom regex stripper and Depth Counter algorithm to gracefully extract the JSON from deep within the raw text without destroying data. Massive Rate Limits: Processing high-res images and deep reasoning chains blew past our 8,000 TPM rate limit instantly. To bypass this, we engineered a client-side Canvas Resizer that mathematically compresses image tokens by 75%, and we merged two separate AI calls into a single highly-optimized "Combo API". We also built a rigorous UI cooldown timer to mathematically guarantee users don't hit rate limits.

Accomplishments that we're proud of

Zero Rate-Limit Architecture: We successfully built a deep-reasoning vision app that comfortably operates under incredibly strict free-tier rate limits. Intelligent Error Handling: Our custom JSON parsing algorithm can survive AI hallucinations, block cutoffs, and stray brackets without crashing the app. The UI/UX: We designed a gorgeous, premium UI with real-time score-counting animations that makes clinical dermatology accessible and visually stunning.

What we learned

We learned that when dealing with advanced reasoning LLMs, you cannot force them into a box. Strict negative prompting (e.g., "DO NOT REASON") often backfires. Instead, you have to engineer robust, fault-tolerant middleware that allows the AI to "think" naturally, and then cleanly extracts the structured data you need on the backend.

What's next for DermaSync: Your Personal AI Dermatologist

In the future, we plan to turn DermaSync into a native mobile app where users can simply point their camera at a product label in the store to instantly get a safety score overlaid in Augmented Reality (AR). We also plan to integrate a direct database of cosmetic chemistry to track long-term skin barrier health over time.

Built With

• css
• framer-motion
• groq
• next.js
• qwen
• react
• render
• typescript