ShelfWise

Inspiration

Most skin care tips begin with what to go out and purchase. A skin scan reveals something is wrong and the typical answer is yet another serum, another procedure, and a further step in a complex routine. But what happens if the products that you already have are sufficient—or some of them are even sabotaging your skin goals?

We ask ourselves a different question when creating ShelfWise: Does your current skincare regimen make sense for your skin before purchasing another product?

We wanted to link the skin-analysis data with an intelligent audit of the existing user's shelf, so that they could see what they need to cut, what ingredients they may have to avoid, which formulations may not be suitable, and what their real needs are, without having to add another shopping list.

What it does

ShelfWise integrates the Perfect Corp YouCam V2.1 Skin Analysis API and a rule-based bio-inventory engine that scores skincare products based on the user's skin profile and current routine.

The YouCam integration includes workflows for skin-analysis concerns, including wrinkles, pores, texture, acne, oiliness, radiance, moisture, redness, pigmentation, and under-eye concerns. Skin-profile calibration: Users can specify or fine-tune their skin's type and sensitivity, so that the audit would consider skin compatibility and the possibility of barrier risk. Ingredient intelligence: A custom INCI parser removes the ingredient information, identifies known active ingredients, infers functional roles, estimates irritancy and assists in formulation characteristic classification.

• Bio-inventory conflict detection:The engine analyzes the conflict in scan to shelf, incompatible combinations of active ingredients, skin type issues, skin type vehicle compatibility, ingredient avoidance and duplicate product roles. ShelfWise optimizes this routine personalized for each user: it recommends what to keep, pause or separate, and it recommends just when a true gap remains in the routine. Creating AM/PM routines based on budget and cost-per-day calculations. When the actual shelf corresponds to the set up of the routine needs, the engine can suggest no further purchases, rather than manufacturing needs.

ShelfWise isn't just about creating a longer list of products, it's about making a skin care decision easier, more sensible and more economical.

How we built it

It has been built using Next.js 16 App Router, React 19, TypeScript, Tailwind CSS v4, and Framer Motion.

The code base is divided into modules for skin-analysis integration, recommendation engine, ingredient parser, product catalog and user interface.

The validation of images, upload of the files, creation and polling of tasks, parsing of the response, concern tier validation, credit-cost calculations and fallback handling are all addressed at the server side of the integration in the YouCam integration. Dedicated API routes will expose scan status, demonstration data, shelf auditing and custom INCI parsing.

The recommendation engine is based on explicit, inspectable rules, instead of the unexplained recommendation score. Considers concern thresholds, ingredient-role combinations, product irritancy, skin-type compatibility, texture vehicles, routine timing, and costs. These decisions are easier made testable and maintainable with typed input and output contracts.

It has a multi-step interface from skin analysis to shelf auditing, product details and finally a routine verdict. The other features are persona based demo scenarios, INR/USD cost presentation, local persistence and export to clinical summary.

We leverage unit tests with Vitest and end-to-end/visual-verification coverage with Playwright.

Challenges we faced

A problem was that the structured responses from the YouCam API had to be managed and the skin-analysis data needs to be the same across the recommendation pipeline. There should be no "raw score to user-facing score" inconsistencies and the difference between SD and HD concerns should be treated separately.

The other one was getting unstructured ingredient lists to be useful as product information. Consistent representations of ingredient names, concentrations, functional roles, texture vehicles, and compatibility rules are needed to support an audit.

Another challenge that we faced was balancing depth with usability. It would be too much information for users if all interaction were shown, but too little information if all the results were simplified. The answer was to structure findings based on actionable decisions and then display the routine, conflicts, and costs all in one.

Last and most important, they had to decouple the presentation layer from the business logic layer and be able to use a set of all the same demo data for repeatable testing.

What we learned

ShelfWise helped us to create simple data contracts for our API-driven application, to clearly define our recommendation logic, to deal with semi-structured ingredient information, and to test our business rules and user journeys.

Most importantly, it has revolutionized thinking on personalization. Valuable AI doesn't necessarily have to say more. Often it's most useful for someone to realize what they already have, what needs attention, and what they can put away from their shopping list.

Potential impact

The goal of ShelfWise is to empower consumers to make better choices about skin care, avoid waste of time and money, understand potential conflicts in their regimen, and spend their skin care dollar more thoughtfully. In the case of skin care retailers, it means another type of personalization – one based on a customer's buying history and inventory – not just their shopping wish list.

ShelfWise is an educational prototype for decision-support, rather than a medical diagnostic tool. The compatibility and sensitivity flags for ingredients are rule-based, not a statement of clinical safety or individual sensitivity. If skin conditions persist or are severe, users are encouraged to seek professional advice.

Built With

• artificial-intelligence
• beauty
• computer-vision
• framer-motion
• inci-ingredient-parsing
• next.js
• node.js
• perfect-corp-youcam-api
• personalized-skincare
• playwright
• react
• skin-analysis
• tailwind-css
• tech
• typescript
• vitest