Stationery e-commerce for the Egyptian market

What We Built

Pencil Case is a live stationery store in Egypt — pens, notebooks, planners, and desk goods — at pencil-case.com.

I built the storefront and checkout, Paymob and J&T integrations, admin tools for orders and fulfillment, the CMS-driven homepage, transactional email, and Facebook/Instagram conversion tracking.

At a glance: merchandised homepage, brand pages, product reviews, voice search, Arabic-friendly UI, city-level shipping, COD and local card/wallet payments, order emails, and ad attribution.

---

Technology Stack

---

The problem

A generic storefront fails here. Shoppers expect cash on delivery, local cards and wallets, city-level shipping, and an Arabic-friendly experience — RTL layout, pricing in EGP, and Egyptian city addresses. The merchant needs to push heroes, category banners, and collections without a deploy. Brands matter as much as categories, and reviews help shoppers choose between similar pens and notebooks. On top of that, the business needs reliable order email, courier handoff, and ad attribution — not just a pretty catalog.

---

Full-stack architecture

We implemented the store as three connected services, each with a clear job:

• Storefront — Next.js app 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, text and voice search, cart, and a multi-step checkout. Server-rendered for SEO; CMS fetches fail soft so a missing Strapi block does not take down the homepage.
• Commerce backend — Node.js API with custom modules wired into checkout and admin: brands, COD fee, Egyptian shipping rates, announcements, product reviews, Paymob payments, and J&T Express fulfillment. Catalog, cart, and orders live in PostgreSQL; product media in Cloudflare R2.
• CMS — Strapi for hero, banners, collections, blog, and content pages, with on-demand revalidation so marketing can change the store without touching code.

After checkout, an automated pipeline handles confirmation email, courier pay type (COD vs prepaid), Paymob capture when needed, and J&T waybill creation — with each step isolated so a courier or payment failure never blocks the customer email.

---

Running the store

Day-to-day work stays in the admin panel and Strapi — no deploys for content or routine orders. Staff can update the homepage, manage orders, issue Paymob refunds, create and track J&T waybills, invite team members, and hold large COD orders for approval before a label goes out.

---

Payments — Paymob

Paymob is Egypt’s local payment rail, so we built a custom Paymob payment integration rather than forcing Stripe-only checkout.

What the integration covers:

• Cards and mobile wallets through Paymob payment sessions, with redirect back to the storefront after authorization.
• Cash on delivery as a separate path, with a configurable COD fee line item synced to fulfillment.
• Webhook handling with HMAC validation, payment status reconciliation, and admin tools to recover stuck carts or force refunds.
• Payment gates before fulfillment — prepaid orders must be captured before a J&T waybill is created; COD orders follow different rules based on order total and fee thresholds.

The checkout UI surfaces Paymob alongside COD, and the admin panel exposes Paymob links and refund actions per order.

---

Courier — J&T Express

Shipping is not a flat rate dropdown. We integrated J&T Express as a custom fulfillment provider tied to Egyptian city-level shipping logic.

What we implemented:

• Waybill creation from order shipping addresses, mapped to J&T party locations with COD vs prepaid pay types.
• Auto waybill on order placed for eligible prepaid and low-value COD orders; larger COD+fee orders wait for manual admin approval before a label goes out.
• Status webhooks from J&T push delivery scans back into the order system so order status stays in sync without manual polling.
• Return waybills for reverse logistics when needed.
• Admin widgets to create labels, check courier status, and manage fulfillments from the order detail view.

City-based shipping rates on the storefront feed into this provider so customers see accurate delivery costs before they pay.

---

Email — Resend

Order confirmation is not optional for a production store. We added a custom Resend email integration on the commerce backend with React email templates.

Templates and triggers:

• Order placed — sent to the customer on checkout with line items, COD fee breakdown, shipping total, and product images encoded for email clients.
• Password reset — triggered from the auth flow when a customer requests a reset link.
• Admin user invited — sent when a new staff member is invited to the store admin.

The order-placed email sends independently of payment capture or waybill creation so customers always get confirmation even if downstream steps fail.

---

Marketing — Facebook & Instagram ads

The store runs paid campaigns on Facebook and Instagram, so conversion tracking was built in from the start — not bolted on later.

What that means for the business:

• Campaign attribution — see which ads and landing pages actually drive purchases, not just clicks.
• Cart and checkout signals — retarget people who added items but did not finish checkout.
• Purchase reporting — tie completed orders back to ad spend so the merchant can measure return on ad spend (ROAS).
• Reliable numbers — duplicate purchase events are filtered out so reporting stays accurate when customers refresh the confirmation page.

This gives marketing a clear picture of what is working without relying on guesswork or spreadsheet exports.

---

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. Brand pages and product reviews help shoppers compare and trust before they buy. Voice search on mobile lets people find products by speaking instead of typing — useful when browsing one-handed.

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

---

Deployment

The storefront, commerce API, CMS, and PostgreSQL database run on a VPS deployed through Dokploy. Cloudflare sits in front for DNS, CDN, caching, and R2-hosted product images. Sentry catches production errors across services.

---

Technical choices

• A dedicated commerce backend so catalog, cart, orders, payments, and fulfillment share one API and one PostgreSQL database.
• Server-rendered Next.js for SEO and fast first paint; responsive layouts across shop, product, cart, and checkout for mobile-first browsing.
• Paymob instead of Stripe-only, because that is how customers pay locally.
• Resend for transactional email with React templates, not raw HTML strings in the backend.
• J&T Express fulfillment with webhook-driven status updates, not manual tracking spreadsheets.
• Facebook and Instagram conversion tracking with accurate purchase reporting so ad spend stays accountable.
• Custom brand, COD fee, and shipping-rate modules so Egypt-specific rules live in code, not workarounds.

---

Outcome

A production stationery store that looks like a brand and behaves like a local retailer: content managed without code deploys, local payments and delivery, reliable order emails, and measurable Facebook/Instagram campaigns. Shop it at pencil-case.com.