ShadeSet

Approve the eye-makeup looks you love and get one kit that makes them all: the cheapest basket within a real South African catalogue, checked fairly against buying each look separately.

Comment

Inspiration

Makeup tutorials and try-on apps help you pick a look. They don't help with the next step: working out what to actually buy when you like several looks at once.

If you like more than one eye look (one for every day, one for dinner, one for evenings), the easy option is to buy a kit for each look. Those kits share shades, so you end up paying for duplicates. ShadeSet shows the looks on a face first, asks you to approve the ones you actually want, and only then works out what to buy.

What it does

  • Pick a face: the hosted demo uses our synthetic sample face with genuine YouCam Makeup VTO renders generated in advance. Own-photo previews also run locally with a configured API key. Hosted uploads are enabled with a small shared demo allowance, enforced by a persistent counter; when it is exhausted, the sample remains available. Hosted configuration has been checked, but a full hosted render has not yet been verified.
  • Add to kit: nothing counts until you add a look to your kit. That choice is tied to the exact photo, recipe and preview; if any of them changes, it resets.
  • One basket: finds the cheapest complete purchase that covers every shade your approved looks need, within a small Creative Glamour catalogue (palettes, refills, cases and one R95 local delivery). Prices recorded 26 Oct 2026, in ZAR.
  • Fair comparison: for each look it keeps every equally cheap kit, then compares your basket against the cheapest combination of separate kits with duplicate products removed. For the sample with all three looks: R550 delivered vs R743 - R193 less.
  • Shop links, not a checkout: each product has a Shop link to the retailer. If combining the looks saves nothing, the app says so ("One basket. Already the cheapest.") instead of inventing a saving.

How I built it

I started from an empty folder with the Devpost Learn Skill Pack. Scope, PRD and spec were written and approved before any code, and the git history shows that order. The app is plain JavaScript, HTML and CSS with a small Node server, deployed on Vercel. Each step (pick a face, pick looks, see your kit) fits on one screen. YouCam generates the previews (skin smoothing off); plain, tested code works out prices and coverage. The basket search checks every valid combination of palettes, refills and cases in the catalogue, and 36 automated tests cover the maths, approvals, uploads and edge cases. After reviewing the first build I asked for a full redesign because it looked generic, and later raised the preview intensity because two looks were barely visible.

Challenges

  • Keeping the comparison honest: a "separate kits" price is easy to inflate by counting the same palette twice or picking unlucky filler shades, so the comparison removes duplicates and gives the separate approach every equally cheap option.
  • Keeping each look's named shades consistent with the products in the basket, while being clear that on-screen colour is approximate.
  • Making the previews clearly visible: the first Everyday and Dinner renders were too subtle to judge, so the recipes were strengthened and all three previews re-rendered.

Accomplishments

  • A complete flow from preview to approval to one basket to a fair comparison, built with the Skill Pack in one session.
  • Real retailer prices, checked on every product page on 26 Oct 2026.
  • A comparison that can't flatter itself: tests check that every equally cheap option is kept and that a single filler-shade choice can't inflate the separate-kit price.

What I learned

Planning first made the build faster, not slower. Deciding up front exactly what "fair" meant for the comparison turned into the tests that checked it, and reviewing the running app early led to a redesign that a feature list alone would never have prompted. Clear limits also matter: saying what the app does not promise (live checkout, exact colour, a market-wide lowest price) makes the claims it does make easier to trust.

What's next

More retailers and products, more looks, and safely hosting the own-photo option for everyone.

Limits: cheapest within this catalogue and price snapshot, not a market-wide guarantee. Preview colour is approximate. South African delivery only.

Built With

Share this project:

Updates

Submission history