• 

• 

• 

Inspiration

Changing skin should not mean navigating an increasingly confusing shelf of products.

I built MenoMorph AI around a question: what if skincare discovery acknowledged the menopause life stage instead of treating every shopper as a generic “anti-aging” customer?

I wanted to connect three things that often appear separately: skin insights, a person's own observations, and the products they are considering.

The result is a menopause-aware beauty discovery prototype that turns a skin scan into an understandable next step—not just another number on a dashboard.

What it does

MenoMorph AI connects YouCam Skin Analysis with explainable product screening, routine suggestions, and a selected-product basket.

The experience includes:

• Selfie upload and live YouCam Skin Analysis.
• A dashboard for the skin metrics mapped by the application.
• Transparent prototype rules that flag products for review.
• Explanations showing which catalog ingredients matched the watchlist.
• Morning and evening product suggestions.
• Product selection controls and a selected-product total.
• A session-based wellness logger for hot flashes, sleep, and observations.
• A mobile-first interface with desktop layouts and session-reset controls.

The core journey is:

Selfie → Skin insights → Product explanations → Routine suggestions → Product shortlist.

How I built it

I built the interface with Next.js, React, TypeScript, and Tailwind CSS.

The YouCam integration runs through a server-side Next.js API route:

1. Receive the uploaded image.
2. Initialize the YouCam upload.
3. Upload the image to the returned destination.
4. Create a Skin Analysis task.
5. Poll the task for completion.
6. Map the returned results into the dashboard.

The API credential stays on the server.

Product screening is implemented as transparent application logic rather than an unexplained recommendation. The prototype uses a demonstration catalog and a small ingredient watchlist.

Routine suggestions are derived from the current product-screening results. The user's selected-product basket is tracked separately.

AI-assisted development helped me scaffold code, troubleshoot errors, and refine the submission. I tested the integration through actual API requests and iterative debugging.

Consumer and retail value

For consumers, MenoMorph aims to make the connection between skin insights and product discovery easier to understand.

Instead of an unexplained recommendation, users can inspect a flag, see the matching ingredients, compare product options, and understand the cost of their selected shortlist.

For retailers, the prototype demonstrates a contextual discovery journey from analysis to product consideration. It illustrates how a catalog could provide explanations alongside product choices rather than relying only on generic categories.

These are intended benefits. I have not yet measured conversion changes, return rates, clinical outcomes, or improvements in skin health.

Challenges I faced

Connecting the browser and server correctly

-Early integration errors came from mixing client-side state updates with server-route code. Separating the React upload handler from the Next.js API route clarified the architecture.

• Keeping credentials in the right place The API key initially was not loading because .env.local was inside the app directory rather than the project root. Moving it and restarting the server resolved the missing-key issue.

-Distinguishing failure from delay One of the most useful debugging moments was discovering that a message labelled “timed out” was actually a completed task with an error: error_no_face.

-Inspecting the upstream response showed that the image had failed face detection. Retesting with a suitable image produced successful analysis tasks.

• Handling asynchronous analysis The analysis was not instantaneous. I implemented polling and tested completed requests that took approximately 12–22 seconds overall in my local development environment.

Those measurements include application and development-server overhead; they are not a benchmark of the YouCam model alone.

Making the prototype understandable

I worked through TypeScript configuration, response typing, route syntax, mobile layouts, product-selection controls, and documentation.

I also identified a placeholder skin-age value and separated that placeholder from real analysis results. This reinforced an important lesson: a polished interface must not make unsupported data look official.

Accomplishments I am proud of

• Completing live YouCam Skin Analysis requests successfully.
• Connecting analysis to an interactive product-discovery experience.
• Making product-screening explanations visible.
• Building a prototype around a specific audience and life stage.
• Turning integration errors into a better understanding of the entire image-upload and asynchronous-task workflow.

What I learned

A successful API request is only the beginning. An effective product also needs correct result mapping, clear loading states, useful error messages, understandable explanations, and honest boundaries. I learned to inspect the actual upstream response rather than assuming every failure was a timeout. I also learned that a rule-based product flag is not a medical diagnosis, and that an illustrative score should not be presented as a clinically validated assessment.

Current scope and limitations

MenoMorph is a cosmetic wellness and retail-discovery prototype, not a medical diagnostic tool.

• The catalog, prices, and ingredient lists are demonstration data.
• Screening thresholds and watchlists are illustrative, not clinically validated contraindications.
• Ingredient matching is not a comprehensive allergy, formulation, or ingredient-interaction checker.
• Routine suggestions are options, not a prescription to use every listed product together.
• The composite index is calculated by the prototype, not presented as an official clinical score.
• Wellness entries and product selections are session-based.
• Virtual try-on, payments, and retailer fulfillment are not implemented.
• The app does not determine hormone levels or diagnose menopause or skin disease.

What's next

My next priorities are to strengthen response validation and missing-value handling, improve routine ordering, validate the experience with users, and seek professional review of the screening language. After that, I would explore verified retailer inventory, consent-based history, and a real virtual try-on integration.

MenoMorph AI: Changing skin. More confident choices.piration

Built With

• api
• css
• next.js
• react
• tailwind
• typescript
• youcam