Stationery e-commerce for the Egyptian market

What We Built

A stationery store for Egypt: pens, notebooks, planners, and desk goods. Headless commerce with a Next.js storefront, a Node.js backend, and Strapi CMS, local payments, city-level shipping, brands, and a homepage built for merchandising rather than a product dump.

---

Technology Stack

---

The problem

A generic storefront fails here. Shoppers expect cash on delivery, local cards and wallets, city-level shipping, and Arabic-friendly UI. The merchant needs to push heroes, category banners, and collections without a deploy. Brands matter as much as categories.

---

What I built

A commerce system in three parts:

• Storefront, Next.js store with a homepage that sells the brand: CMS hero, collections, brand strip, category bento grid, then merchandised carousels (recommended, bestsellers, new arrivals). Shop, collections, categories, product pages, search, cart, and a multi-step checkout.
• Backend, Headless Node.js API with custom modules: brands, COD fee, shipping rates, announcements, Paymob payments, J&T Express fulfillment. Catalog, cart, and orders live in PostgreSQL.
• CMS, Strapi for hero, banners, collections, blog, and content pages, with revalidation so marketing can change the store without touching code.

---

Shopping journey

The homepage is the catalog’s front door, not a dump of products. CMS banners drive the bento grid so seasonal campaigns sit on real category destinations. Brands get their own listing and product discovery.

Fig. 2, Shop or collection grid: browse, filter, merchandising.

Fig. 3, Product page: media, variants, price, add to cart.

Product pages carry variants and price. Cart and checkout close the loop with Egypt-specific shipping and Paymob (plus COD where it belongs).

Fig. 4, Cart: line items, totals, next step.

Fig. 5, Checkout: address, shipping, Paymob / COD.

---

Technical choices

• Headless Node.js backend so catalog, cart, and orders stay one source of truth in PostgreSQL.
• Server-rendered Next.js for SEO and fast first paint; CMS fetches fail soft so a missing Strapi block does not take down the homepage.
• Responsive layouts so shop, product, cart, and checkout stay usable on phones, which is how most customers browse.
• Voice search so shoppers can find products by speaking instead of typing, especially on mobile.
• Paymob as payment provider, because that is how customers pay locally.
• Resend for order-update emails so customers hear when an order is placed, paid, or shipped.
• Shared Egyptian shipping logic (cities, rates).
• Custom brand module so manufacturers are first-class.
• Cloudflare in front of the store for DNS, CDN, and caching; Dokploy on a VPS for app and database deploys.

---

Outcome

A live-ready stationery store that looks like a brand and behaves like a local retailer: merchandising from CMS, catalog from a headless Node.js backend, and payments and delivery that work in Egypt. Shop it at pencil-case.com.