ROUZEAL
Illuminating your skin — luxury beauty, delivered.
A premium beauty and cosmetics storefront for the Pakistani market — skincare, haircare, fragrances, makeup, and grooming from established international and regional brands like L'Oreal, Maybelline, Revlon, and Dove, delivered door-to-door.
Numbers about the client's business — useful context, not my engineering output.
Numbers I produced — measurable, attributable to the work I did.
My specific scope on this project — separate from anything the client team supplied.
- Next.js 15 App Router storefront — category, product, and cart pages
- Catalog architecture across 7 product lines (skincare, hair care, fragrances, makeup, personal care, kids, men's)
- Checkout flow supporting Cash on Delivery alongside SSL-secured card payments
- Tailwind CSS v4 design system shared across the storefront
- Image pipeline via next/image for hero and product photography
From brief to production system.
Online beauty retail in Pakistan lives or dies on trust and speed. Buyers are mobile-first, price-sensitive, and used to Cash on Delivery — a slow catalog or an unfamiliar checkout flow sends them straight back to a physical store.
Built the storefront on Next.js App Router with server-rendered, image-optimized category and product pages for fast first paint on mid-range mobile devices. Tailwind CSS v4 powers a consistent design system across the catalog. Checkout supports both Cash on Delivery and SSL-secured card payments to match local buying habits.
A live storefront organized across seven product lines (skincare, hair care, fragrances, makeup, personal care, kids, and men's grooming), with free shipping above Rs. 5,000 and a 7-day return policy that lowers the barrier for first-time online beauty buyers.
The boundaries that shaped the build.
- 01Mostly mobile traffic on mid-range Android over 4G — performance budget tight
- 02Customer base still warming up to online beauty shopping — checkout had to feel familiar (COD) alongside modern SSL-secured card payments
- 03Catalog spans 7 product lines across dozens of international and regional brands — needed a category structure that scales without becoming unwieldy
What I chose, and what I gave up.
Cash on Delivery kept as a first-class checkout option alongside card payments
A simpler, single-payment-path checkout. Won a checkout flow that actually matches how Pakistani beauty shoppers prefer to pay, instead of forcing a habit change.
How it shipped, week by week.
Catalog structure + design system
Mapped the category tree (skincare, hair care, fragrances, makeup, personal care, kids, men's) and built the Tailwind v4 design system for the storefront.
Storefront + product pages
Built the App Router catalog, product detail pages, and cart flow with server rendering for fast mobile load times.
Checkout + trust signals
Wired up Cash on Delivery alongside SSL-secured card checkout, plus free-shipping threshold and return-policy messaging throughout the funnel.
Launch
Shipped the production storefront on Vercel and handed off content management to the Rouzeal team.
What it does. How it's built.
Features
- Multi-category catalog: skincare, hair care, fragrances, makeup, personal care, kids, and men's
- Curated brand portfolio spanning international and regional labels
- PKR pricing with free shipping above Rs. 5,000
- Cash on Delivery + 256-bit SSL-secured checkout
- 7-day return policy surfaced throughout the buying flow
- Mobile-first responsive storefront
- Optimized responsive imagery via next/image
Architecture
- 01Next.js 15 App Router with server-rendered category and product pages
- 02Tailwind CSS v4 design system shared across the storefront
- 03next/image with responsive srcsets for hero and product imagery
- 04Deployed on Vercel's edge network
Annotated excerpts.
export default async function CategoryPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const products = await getProductsByCategory(slug);
return (
<section>
<FreeShippingBanner thresholdPKR={5000} />
<ProductGrid products={products} />
</section>
);
}Continue browsing
Have a project like this in mind? Let's talk.
Send me a brief and I'll respond within 24 hours.