• 

  View of the home page UI

Inspiration

When it comes to skincare and haircare, I often struggle to maintain a consistent routine. I have products I want to use regularly, but determining which ones to include in my morning and evening routines, along with their order, can lead me into an overwhelming search spiral. I've tried setting reminders and alarms, but I frequently end up skipping the routine altogether. My goal is to simplify the organisation of what I already own and create a straightforward, repeatable plan. Since I became conscious of my spending, waste and return on investment, I began a project, Pan and thought the app would assist me greatly in this mission.

What It Does

The Skincare Routine Personalizer enables users to choose products, address their skin concerns, and develop a structured routine. Users can save their routines, edit or delete them, check off steps as they complete them, and monitor the days they have completed their routines throughout the week. Additionally, they can keep track of their skincare products, noting their expiration dates and whether they need to restock.

How We Built It

Codex followed the "Build With AI Skills" plan-first workflow. This process involved defining the learner profile and project scope, transforming that information into a Product Requirements Document (PRD) and technical specifications, and then breaking the work into smaller build steps. During the learning phase, I utilised Codex as an AI coding partner to implement features, explore the code, and understand how the frontend, API, and database interact. I provided guidance on product decisions and reviewed the app as it developed.

The app itself features a phone-first interface built with React and Vite, an API created using Express on Node.js, and SQLite for local data storage. Currently, its routine suggestions rely on transparent, rule-based matching against curated product information.

The app organises product and routine data in related database tables, allowing a saved routine to have its own ordered steps and checklist progress. Recommendations are generated based on product tags and scheduling information. The chosen time also determines whether it is categorised as day or night; for instance, a time of 22:00 is considered nighttime.

Challenges We Encountered

One challenge was keeping the product information, user preferences, and routine suggestions connected across the interface, API, and database. We also had to make sure saved routines kept their ordered steps, and that checklist progress was recorded for the right day. We refined the schedule controls so the selected time and day or night routine stay aligned, while keeping the form clear and easy to use.

Accomplishments We Are Proud Of

I'm proud that the app helps people make more of the products they already own. A person can create a routine, save it, return to it later, and check off its steps without rebuilding it each time. I also created a persistent local database and made the routine suggestions explainable through product information and concern matching with the help of Codex. This is the first time I used Agentic AI.

What We Learned

I learned how a product idea can become a working flow across a frontend, API, and SQL database. Building the app gave me hands-on practice with data relationships, joins, persistence, and keeping business rules on the server rather than relying only on the screen. I learned to prompt AI to ground product claims in the existing catalogue information and accurately describe the suggestion score.

What's Next for Skincare Routine Personalizer

Next, I’d like to expand the curated product catalogue and improve how product details and ingredient compatibility are sourced and explained. Barcode lookup and syncing routines across devices are possibilities for a future version.

Built With

• codex
• express.js
• git
• github
• javascript
• react
• sqlite
• vite
• vscode