Aks-e-Gul
Mercatura vestium hereditatis
I designed and built a mobile-first storefront and operations system for a children’s occasion-wear brand, from product discovery and custom sizing to COD fulfillment and first-party insight.
A delicate product with very practical logistics.
Aks-e-Gul makes occasion wear for young girls, often bought for weddings, Eid, birthdays, and gifts. Parents are usually browsing on a phone, comparing details that are both emotional and practical: the embroidery, the colour, the child’s size, the delivery window, and whether a custom measurement is possible.
The store had to feel as considered as the clothes while still answering those questions quickly. Behind the quiet storefront sat a busier reality of city-based delivery, COD orders, WhatsApp confirmation, product variants, coupons, customer accounts, reviews, and day-to-day merchandising.
The brand and the machinery behind it.
These views follow the same product data from discovery to administration.
Desktop storefront. Parents can move from bilingual collections into search, filters, availability, sizing, and price without losing the calm retail tone.
Mobile storefront. On mobile, the catalog keeps its bilingual navigation and useful comparison controls within comfortable thumb reach.
Product variants. A product can combine colour, age-based sizes, custom measurements, live availability, quantity, and WhatsApp help in one place.
COD review. The COD review shows the delivery details, discount, city shipping, gift wrap, and final total before the order is placed.
Commerce workroom. Store settings, shipping, announcements, visual presets, and live previews sit beside the catalog, customer, and order tools.
Commerce rules that shaped the build.
- 01
This is a cash-on-delivery business with WhatsApp confirmation. Checkout therefore needs a clear delivery step, a complete review, a trackable order number, and a message workflow that can retry without holding up the customer.
- 02
Prices can change with size, custom measurements, bundles, coupons, city delivery, free-shipping thresholds, and gift wrap. The server rebuilds the order from current product data instead of trusting totals from the browser.
- 03
Reviews belong to real purchases and open only after delivery. Customer sessions, admin sessions, and admin impersonation follow separate rules so support work does not weaken the customer account boundary.
I built the sale from both sides.
I carried the brand language through 14 storefront pages and 13 admin pages using Next.js 16, React 19, Tailwind CSS, and Convex. The same product records drive the home page, collections, search, product detail, cart, checkout, customer history, and the administration workspace.
Checkout is a two-step COD flow. Delivery fields are validated before review, then the server verifies product availability, size pricing, bundle eligibility, coupons, shipping, and gift wrap. A checkout-attempt ID makes retries idempotent, and the order queues a WhatsApp confirmation with explicit sent, skipped, and failed states.
I later added a first-party behavior layer because page views alone could not explain where shoppers struggled. It batches journey events, search terms, device-specific friction, heatmap cells, cart activity, and checkout progress. Orders are linked back to those journeys, and status changes separate placed, delivered, and cancelled revenue in the admin insights.
Turn the brand into a browsing system
The heritage-led art direction became a reusable language across home, collections, search, product detail, cart, checkout, accounts, support, and tracking.
Make COD checkout trustworthy
Catalog variants, cart persistence, custom measurements, bundles, coupons, shipping rates, gift wrap, order numbering, and tracking resolve into one server-checked order.
Give the business its own evidence
The admin workspace joins catalog and order management with search demand, journey timelines, conversion quality, product revenue, and concrete friction signals.
A repeated checkout returns the same order
Each browser attempt carries an ID, so a retry cannot create a second COD order.
const existingOrder = await ctx.db
.query("orders")
.withIndex("by_checkoutAttemptId", (query) =>
query.eq("checkoutAttemptId", checkoutAttemptId),
)
.unique();
if (existingOrder) {
return {
orderNumber: existingOrder.orderNumber,
trackingUrl: trackingUrl(existingOrder.orderNumber),
};
}What shipped.
“The storefront is where the promise is made. The admin workspace, checkout rules, and customer communication are how the business keeps it.”Engineering field note