GlowAdvisor

• 

  “From selfies to solutions: smart skincare worldwide.”

Inspiration

It started with a simple frustration. A friend asked me which moisturiser to buy. She had oily skin, lived in Kanpur (humid summers, dry winters), and had a budget of ₹400. Every skincare app I showed her recommended products that were either unavailable in India, priced at ₹3,000+, or formulated for dry European climates. The global skincare industry is worth $200 billion — yet almost none of it is personalised for the 1.4 billion people in South Asia who face: Tropical/semi-arid climates that completely change what ingredients work Budgets between ₹200–₹2,000, not $80 serums Skin concerns like hyperpigmentation and sun damage that are underrepresented in Western datasets I wanted to build something that actually understood context — not just scan a face, but know whose face it was scanning.

What it does

GlowAdvisor is an AI-powered skin analysis web app that:

1. Profiles the user first — age range, climate region, budget, skin goals, and ingredient allergies
2. Analyses a selfie using Claude Vision AI — detecting skin type, health score, estimated skin age, and 5 specific concerns
3. Generates a personalised AM/PM routine — every step tailored to the user's profile
4. Recommends budget-matched products — ₹300 budget gets different advice than a luxury budget
5. Answers follow-up questions via an AI chat interface that retains full skin context
6. Tracks history — past analyses saved locally so users can monitor progress over time All of this runs entirely in the browser — zero backend, zero server, zero database.

How we built it

Architecture The entire application is a single HTML file with vanilla JS. No frameworks, no build tools, no deployment complexity.

User Profile
     ↓
Profile Context → injected into Claude prompt
     ↓
Selfie (base64) → Anthropic /v1/messages API
     ↓
Structured JSON response (score, concerns, routine, products)
     ↓
Rendered results + localStorage history


## Challenges we ran into
Challenge 1: Structured JSON from a Vision Model
Claude Vision is designed for natural language responses, not structured data output. Early versions returned responses wrapped in markdown code blocks, with commentary before and after the JSON. The fix was a combination of explicit prompt constraints and robust client-side parsing.
Challenge 2: Making Demo Mode Feel Real
Without an API key, the app had to still feel impressive. I built a pool of 3 demographically distinct demo profiles with realistic scores, concerns, and routines — and added randomisation so the same demo never shows twice in a row. Budget-aware tweaks (appending "budget pick" labels) made even the fallback feel personalised.
Challenge 3: Dark Mode + CSS Variables
Implementing dark mode across a complex layout with 9+ CSS variables required careful scoping. The solution — a `.dark-mode` class on `<body>` that overrides all `:root` variables — kept the code clean and transitions smooth.
Challenge 4: Chat with Persistent Skin Context
The AI chat needed to "remember" the skin analysis without a real backend. The solution was a `chatHistory` array seeded with the full analysis result as the first user message — giving Claude all the context it needed for intelligent follow-up answers, while keeping the architecture completely stateless.


## Accomplishments that we're proud ofZero-backend AI integration — A full Claude Vision analysis pipeline — image upload, structured JSON output, profile-aware prompting — running entirely in a single HTML file with no server, no database, no deployment complexity.
Profile-aware prompt engineering — Getting an AI to return personalised skincare advice by injecting age, climate, budget, goals, and allergies directly into the vision prompt. The same selfie produces meaningfully different results for a 20-year-old in humid Kanpur vs a 40-year-old in dry Rajasthan.
Graceful demo that never breaks — Built a randomised 3-profile fallback system so the app always feels live and impressive — even without an API key. Judges, users, and reviewers never see an error screen.
Genuinely India-first design — Every decision — climate options, budget tiers in ₹, Hindi language toggle, tropical SPF advice — was made with Indian users in mind. Not an afterthought, the core architecture.
Persistent skin journey tracking — History stored in localStorage means users can monitor their skin health score over multiple scans with zero backend infrastructure.




## What we learned
1. Multimodal prompting is an art.
Getting Claude to return only valid JSON — no preamble, no markdown fences, no commentary — took careful prompt design. The phrase `"Return ONLY a valid JSON object — no markdown fences, no commentary"` was essential, combined with `.replace(/```json|```/g, '').trim()` as a safety net.
2. Context transforms AI output quality.
The same selfie analysed with vs without the user profile produces meaningfully different results. Adding `Climate=Tropical` caused Claude to prioritise SPF advice and oil-control; adding `Budget=₹400` shifted product recommendations entirely. The profile isn't just a feature — it's the whole value proposition.
3. Graceful degradation matters more than perfection.
Not every user has an API key. Building a smart demo fallback with 3 randomised skin profiles (Combination, Normal, Oily) meant the app was always demonstrable and never felt broken. Judges, users, and hackathon reviewers all benefit from this.
4. Single-file architecture is underrated.
No Webpack, no npm, no `node\_modules`. The entire app — AI integration, dark mode, i18n, chat, history — fits in one `.html` file. It opens instantly, deploys anywhere, and has zero dependency rot.



## What's next for GlowAdvisor
Camera capture — take selfie directly in-app, no upload needed
Progress charts — visualise skin score trend over multiple scans
Ingredient scanner — photograph a product label and check compatibility
Regional product database — real Indian product names with actual prices
Offline PWA — installable, works without internet for the routine viewer

Built With

• anthropic-api
• base64-encoding
• claude-ai
• claude-sonnet-4
• cormorant-garamond
• css3
• dark-mode
• dm-sans
• google-fonts
• html5
• javascript
• json
• localstorage
• prompt-engineering
• responsive-design
• rest-api
• vision-ai