Detailed case study · Commerce · Skincare
413 Serene Glow storefront
From October 5 to 28, 2024, I built a custom storefront and order-notification workflow for a Philippine skincare brand. The work joined product discovery and checkout to backend order handling and customer updates.
01 / The problem
The storefront also needed to fit the order workflow
The client needed a mobile-friendly place to sell skincare products and manage orders. The project notes describe existing options as too costly, too slow, or not flexible enough for the required order and notification workflow.
A storefront alone would leave checkout, status lookup, and customer communication disconnected. The solution needed to include both the shopping experience and the processes that followed an order.
02 / The approach
Connect each customer step to order handling
I used SvelteKit for the storefront and PocketBase for its backend. Product discovery, filtering, cart, and checkout lead into order creation; customers can look up order status with an order ID and name.
For notifications, PocketBase hooks schedule email work when orders are created or updated. A separate scheduled worker processes the queue and retries unsent messages, keeping delivery attempts outside the customer’s checkout request.
03 / The solution
A custom shop backed by queued email processing
The customer-facing system includes product pages with image galleries and sale pricing, category filters, a responsive cart, and checkout. Its cart presentation adapts between a desktop sheet and a mobile drawer, and product pages include SEO, Open Graph, and Twitter Card metadata. I delivered more than 15 custom Svelte components.
On the backend, create and update hooks schedule confirmation and status emails. The notification collection tracks pending, processing, completed, and failed work; the scheduled job checks records before processing to reduce duplicate sends during overlapping runs.
04 / What changed
Shopping and post-order communication share one system
The delivered application connects catalog browsing and checkout with order lookup and email updates. The frontend was deployed on Cloudflare Pages and the PocketBase backend was hosted separately.
The selected screenshots and workflow diagram show the storefront, product catalog, management table, and notification/retry design.
Project evidence
Interfaces and workflows from the work.
Selected project screens and diagrams support the details in this account.