SkinTracker: never let skincare expire again

2024Personal

A phone-first expiry tracker for a big skincare collection: photo cards for every product, colour-coded expiry, a Use first shelf and monthly reminders before anything goes off.

SkinTracker on a phone: Use first shelf and product cards with days left
HTMLCSSJavaScriptMobile-firstPersonal
Live Preview Source Code

Problem

Someone close to me had close to a hundred skincare products across serums, sunscreens, cleansers, body and hair care. Expiry dates hide on tiny labels, so good products kept expiring unused.

Solution

SkinTracker answers one question: what should I use first? Every product is a photo card with its name, category and expiry date, because a bottle is easier to recognise than its name. Products sort themselves into safe, expiring soon, critical and expired, and a Use first shelf at the top surfaces whatever needs attention. Search and category filters find anything instantly, an alerts screen counts down monthly reminders, and a detail sheet lets you favourite or remove a product. It is plain HTML, CSS and JavaScript, designed for the phone first.

Outcome

It keeps 99 real products in check. No clutter, no charts, just the products that matter right now.