Aina Ai Derma Decode

💡 Inspiration

There is a lot of skin care information out there, and there's virtually no good skin care information. You'll enter any store and find an endless line of serums that say they do everything – but will not tell you how they will help your skin. The vast majority of "skin quizzes" are façade product funnels.

So I wanted to take that approach: read what you know about your actual skin from the objective perspective, then translate that into low-tech, ingredient-by-ingredient information you can actually use and "follow the instructions on," such as what to NOT do. When I saw the YouCam (PerfectCorp) Skin AI API, it clicked. A simple problem was solved—dermatology-grade analysis—and what was still lacking was an honest, calm, privacy-first product that builds on that. That became Aina Ai Derma Decode.

✨ What it does

A single selfie is transformed into a personalized skin plan through Aina Ai Derma Decode:

Take or upload a photo — it's compressed on device and remains private from other users.

1. AI analyzes your skin using YouCam Skin AI, the AI analyzes the skin in seconds, scoring wrinkles, redness, oiliness, acne, dark circles, etc.
2. Ingredient-level guidance converts those scores into specific actives to seek out and the ones to avoid — no jargon! Monitor progress over time using a history log, trend charts and one Skin Health Score. Powered by the same engine, virtual apparel try-on is a feature that allows users to see how items of clothing will look on their complexion.
3. Privacy by design – All your data can be exported and deleted in a single click and consent tracking and full audit trail.

The Skin Health Score quantifies multiple skin raw concern signals into one interpretable number. I score the concerns according to their effect on overall skin condition:

$$ With the same engine, users can also preview clothes on their own bodies: 5. Virtual apparel try-on.

1. Privacy by design – All your data will be deleted or exported in one click with a complete audit trail and tracking of consent.

The Skin Health Score is a single number that combines multiple raw concern signals into one comprehensible score. I consider the concerns according to their effect on the overall condition of the skin:

$$ \text{concern load} = 0.30\,w + 0.20\,r + 0.20\,o + 0.20\,a + 0.10\,d $$

$$ \text{Skin Health Score} = \operatorname{clamp}!\big(100 - \text{concern load},\; 0,\; 100\big) $$

where $w, r, o, a, d$ are the scores of wrinkles, redness, oiliness, acne and dark circles respectively, with each being measured on a $0$–$100$ scale. The higher the score, the better; each point up will be visible to the user on a chart-over-chart.

🛠️ How I built it

Using a custom editorial design system, "Rose Derma" (Inter + Source Serif 4), pill shapes, frosted-glass surfaces, and a soft gradient-blob aurora, Frontend is a single-page app written with React 19 + Vite, styled with Tailwind CSS v4. Animations are provided with the help of the word motion, and all honors the word prefers-reduced-motion. Charts are created using Recharts, PDF/PNG export reports are created with html2canvas + pdfjs.

Backend — Firebase end to end. Cloud Functions are used to encapsulate every call to YouCam API so that there is no key on the browser. Firestore will be used for storing analyses, history, and privacy/consent records; Firebase Auth will be used for accounts (email + Google); and Storage will be used for uploading images behind per-user security rules.

The AI integration is a server-to-server task-based flow: a Cloud Function initiates a task with YouCam, which it then polls for completion with retry/backoff, maps the result into our metric schema and persists it. The callables, analyzeSkin and tryOnApparel, are based on a hardened version of the helper callable callYouCamAPI that provides a comprehensive error taxonomy, presented to the UI as friendly, actionable messages, such as "invalid image", "timeout", "rate-limited", or "quota exceeded.

Designed with GDPR/CCPA in mind, Privacy is a first-class module for data export, right-to-deletion, consent capture, OTP verification and audit logging.

I faced the following challenges:The following challenges were encountered:

Skin analysis isn't request/responses — it's start a task, then poll. That required polling intervals, exponential backoff, hard timeout, and even converting each failure mode into an informative message rather than a never-ending spinner.

• Guarding the secret. YouCam key is only used on the server. This boundary influenced the entire architecture, as you shouldn't put anything sensitive in the client bundle and all of the AI calls must go through Cloud Functions. A firebase-functions v7 migration. I removed tabletop mode functions.config() and moved configuration to .env + dotenv and updated the way that secrets are loaded. Raw model scores are of no interest to a user. The weighting, the single health score, and a carefully crafted ‘traffic-light severity system’ – all were products issues, not engineering issues, as was the case with the locking mechanism.
• Fast and calm. On-device image compression, lazy-loaded images and code-splitting make it snappy on mobile, and the editorial UI retains a reassuring feel to it as opposed to clinical, while its focus on health remains.

📚 What I learned

How to reliably use a production server-to-server AI API: task lifecycles, polling, idempotency and a real error model. The new model @theme/@source in Tailwind v4 and how to create a cohesive and accessible design system using CSS custom properties. Practical privacy by design — Consent, export, deletion, and audit trails are built into, not added onto. That the top layer on an AI model, the interpretation layer, where the scoring, thresholds, honest copy are, is where the real value of the product is mostly to be found.

🚀 What's next

Routine sequencer that arranges the recommended actives (and notifies of conflicts such as retinol + strong acids). Longitudinal insights: your redness is down 18% over 30 days. Shade and undertone-appropriate clothing and product suggestions.

• Native mobile wrapper & offline history.

Built With

• firebase
• firebase-auth
• firebase-cloud-functions
• firebase-storage
• firestore
• html
• html2canvas
• javascript
• jspdf
• motion
• node.js
• perfectcorp
• react
• react-router
• recharts
• tailwindcss
• vite
• youcam