Aroma Care Kuwait

My role

Aroma Care Kuwait is a live bilingual pharmacy storefront for a client in Kuwait. Built with the CupCoding team, I owned the customer-facing Next.js website — Arabic-first with English and RTL — covering shop, cart, checkout with local payments, prescriptions, care plans, and account flows.

Under the hood

1. 01

   Same-origin BFF

   The browser never talks to the commerce API directly. Public catalog reads go through an allowlisted same-origin proxy, and cart, checkout, account and orders go through server route handlers that attach credentials on the server.

2. 02

   Sessions without exposed tokens

   Session tokens live in sealed, HttpOnly cookies and are never returned to JavaScript. Token refresh is handled server-side, and the refresh cookie is scoped to the auth routes only.

3. 03

   Image delivery

   Product and brand images are served from the site's own origin as resized WebP through a server route, so the API hostname does not appear in image URLs. A fixed set of width buckets, explicit cache headers and a disk cache keep it fast.

4. 04

   SEO foundations

   Locale-aware canonical URLs and hreflang (ar, en, x-default), Open Graph and Twitter cards, a revalidating sitemap, robots rules, and JSON-LD for Organization, WebSite, Product, Breadcrumb and FAQ. Account, auth, checkout and prescription areas are noindexed.

5. 05

   Performance

   Anonymous home HTML is cacheable for short windows with on-demand purge, catalog filter data is cached, fonts are self-hosted, translation messages are scoped per route, and heavy UI is code-split behind route skeletons.

6. 06

   Payments and guest orders

   Hosted payment returns are confirmed server-side with retry flows, and redirects are limited to an allowlist of payment hosts. Guest order lookup uses OTP, and unverified order views have personal data stripped.

7. 07

   Tests

   Vitest unit tests cover auth and session logic, cookie handling, the API allowlist, order privacy and SEO helpers.

Challenges & edge cases

1. 01

   Arabic-first and RTL

   Built the storefront in Next.js 16 so Arabic-first, English, and RTL hold together across shop, product, cart, checkout, and account.

2. 02

   Checkout

   Checkout covers a delivery address and map pin, coupons and BOGO gifts, MyFatoorah/Hesabe payment returns, and invoice download.

3. 03

   Account flows

   Account flows cover OTP login, orders (including guest lookup), prescriptions, care plans, loyalty, wishlist, and back-in-stock alerts, via a same-origin BFF with HttpOnly session cookies.

4. 04

   Storefront performance

   Performance work includes cached home HTML, scoped translation payloads, shop filter caching, route skeletons, and self-hosted Arabic and Latin fonts.

5. 05

   Catalog UX

   The catalog includes filters, pagination and infinite listing, brand search, sticky mobile search, and locale-safe navigation.

Screens

Aroma Care desktop homepage with a daily wellness banner, shortcut icons including Today's Offers, and a Kuwait banner.

01 / 04