AH Original · Case study 01

SkinChoice

Live2021 – NowE-commerce · Custom CMS

A production skincare and makeup platform with a fully custom, role-based admin CMS, built on Next.js and a headless Cloudflare Workers API.

View live site

Role: Full-stack
Stack: Next.js · Cloudflare
Year: 2021 – Now

SkinChoice storefront homepage showing skincare products and navigation — skinchoice.pk

SkinChoice dashboard showing catalog totals and quick management actions — admin.skinchoice.pk

Type: Full-stack commerce
Role: Sole developer
Stack: Next.js · TypeScript · Cloudflare
Impact: 91 % optimized

01. The platform

A complete, self-owned commerce solution.

SkinChoice combines a customer-facing storefront and a purpose-built admin CMS. It was developed instead of adopting Shopify or WooCommerce, allowing every part of the catalog, checkout, and merchandising flow to be shaped around the client’s business.

02. Storefront

A modernbeauty shoppingexperience.

A complete storefront with category trees, product variants, a persistent cart, and a seamless checkout experience, all tailored to SkinChoice’s brand.

View live site

SkinChoice: Merchandised homepage and product discovery — Merchandised homepage and product discovery

03. Shopping journey

The complete shopping journey.

The storefront includes category trees, editorial brand pages, filtering, rich product pages with variants, a persistent cart and wishlist, coupon-aware checkout, order tracking, blogs, FAQs, and policy pages, all managed through the CMS.

Color swatches and flexible product variants
Cash on Delivery and incentivized Bank Transfer
Live shipping, coupons, and transactional emails
Customer-facing order tracking

03 / 08 · Product catalogskinchoice.pk

Brand-led catalog with product filters

02 / 08 · Brand discoveryskinchoice.pk

Searchable brand discovery

SkinChoice: Simple customer order tracking — Simple customer order tracking

04. Custom admin CMS

Merchandising without code changes.

The admin covers products, brands, categories, banners, promotional popups, blogs, discounts, orders, subscribers, users, media, and settings. Rich editors and reusable asset pickers let the team operate independently.

Full CRUD across every commerce domain
Drag-and-drop ordering for products and media
Reusable library and block-based editors
Detailed order lifecycle and audit history

SkinChoice: Custom administration dashboard — Custom administration dashboard

SkinChoice: Variant editor with color swatches — Variant editor with color swatches

SkinChoice: Automatic discounts and coupons — Automatic discounts and coupons

SkinChoice: Visual category management — Visual category management

05. Access & architecture

Secure by route, typed end to end.

Every admin route maps to a permission and is verified server-side on navigation. The decoupled architecture uses a typed API client and per-domain services to keep data access out of components.

Super admin bypass and scoped permissions
Shared domain models across roughly 24,000 lines
Server components for metadata and initial data
Client components for interactive shopping state

Browser
Customer & admin UI
Next.js
Rendering & routes
Typed API
Domain service layer
Cloudflare Workers
Headless API
Cloudflare R2
Media storage

06. SEO & performance

Stored image weight removed.

Uploads are compressed to WebP before storage, while AVIF/WebP delivery is tuned to real layouts. An idempotent bulk tool optimizes every referenced asset while preserving its storage URL.

WebP: Upload compression
0: URL changes
Bulk: Optimized

07. Technologies