AS Saqib.

Live Pakistani e-commerce storefront — cash on delivery, orders over WhatsApp

Next.js 16React 19TypeScriptTailwind CSS v4VercelPlaywright

Overview

A production storefront for a Pakistani perfume brand, live on the client's own domain. Twelve fragrances across men's and women's ranges, a full cart and checkout, and a cash-on-delivery order flow that hands the finished order to the shop over WhatsApp. Built on Next.js 16 and React 19, deployed on Vercel with DNS at Cloudflare.

The Problem

The brand was selling entirely through Instagram and WhatsApp DMs. Every order arrived as a scattered conversation — the customer would ask the price, send an address in pieces, and the shop had to reassemble it by hand. There was no product catalogue, no delivery rules a customer could read, and no page to send anyone to. A conventional shop would have meant a payment gateway, a merchant account and a database, none of which the business wanted or needed for cash on delivery.

The Solution

I built the catalogue as a static site and moved only the last step — the order itself — onto WhatsApp, which the shop already lives in. The cart is client-side in localStorage and syncs across tabs; checkout validates the Pakistani phone formats customers actually type; pressing "Place order" formats the whole basket, totals and delivery address into a single WhatsApp message and opens wa.me with it prefilled. Nothing is stored on a server, so there is no database, no API route and no running cost beyond hosting. Prices, delivery rules and contact details all sit in one config file the client can have changed in minutes.

Key Features

01Twelve products across men's and women's ranges, each with a statically generated detail page
02Cart in localStorage via useSyncExternalStore — survives refresh, stays in sync across tabs
03COD checkout that builds the full order into a prefilled WhatsApp message — no gateway, no database
04Phone validation accepting 0300…, +92300…, 92300… and dashed or spaced variants
05Delivery rules from one config: Rs 200 flat, free above Rs 3,000 — drives the ticker, cart progress bar, checkout and policy page
06Build-time image pipeline: raw WhatsApp JPEGs to WebP, logo alpha derived from its own luminance
07Product photography never cropped — fixed 3:4 frames with object-contain throughout
08SEO built in: sitemap, robots, Organization JSON-LD, policy and about pages
0930 automated checks over checkout validation and pricing, plus Playwright screenshot runs at three viewports
10Shipped to assaqibscents.com — Cloudflare DNS to Vercel, www redirected to apex, Let's Encrypt TLS

Built By

Shah Fahad — Senior Software Engineer
Karachi, Pakistan

View Live ↗

AS Saqib.

Overview

The Problem

Key Features

Built By

More Case Studies