Case Study: Zamalek Store

Production-Ready Bilingual E-Commerce Platform for the Egyptian Market

Role: Full-Stack Developer Stack: Next.js 16, React 19, TypeScript, PostgreSQL, Prisma, Redis, BullMQ, Docker Payments: Paymob, Kashier, Stripe Live: zamalek-store.ahmedlotfy.site

Building an e-commerce platform for the Egyptian market meant solving three critical challenges: true RTL/LTR bilingual support, reliable local payment gateway integration, and high performance on mobile networks with large product images.

Technical Architecture

Chose Next.js App Router to leverage React Server Components for fast initial loads and reduced client bundles, moving heavy logic server-side.

Database Design

PostgreSQL with Prisma: 15 relational models covering products, variants, orders, carts, coupons, reviews, and users.
Bilingual at Schema Level: name_ar, name_en fields instead of fragile JSON blobs.
Fully Versioned: All changes tracked via Prisma migrations.

Hybrid Cart System

Guests: Cart in localStorage for instant interaction.
Authenticated: Cart synced to database.
Automatic Merge: No lost items when switching devices or logging in.
Resilient: Survives refreshes, logouts, and device changes.

Background Processing

Implemented BullMQ with Redis to keep checkout fast:

Order confirmation emails sent asynchronously.
Automatic retries with exponential backoff.
Isolated worker process separate from web server.
Checkout stays instant even under load.

Key Solutions

Payment Security

Local gateways like Paymob require strict validation to prevent fraud and duplicate processing:

HMAC signature verification: Every webhook validated for authenticity.
Idempotency checks: Prevent duplicate order processing if gateways send webhooks multiple times.
Centralized validation logic: Auditable and secure payment flow. Financial operations stay reliable even when gateways behave inconsistently.

Image Optimization

High-resolution product images would kill performance on mobile networks. I built a client-side optimization pipeline:

Store on Cloudflare R2 for zero egress fees.
Resize and compress to WebP in browser before upload.
Reduced image size from ~5MB to ~200KB.
Faster uploads, lower bandwidth costs, instant product pages.

Component Architecture

Used Shadcn UI with Radix primitives instead of heavy UI frameworks:

Full Ownership: Components live in codebase, fully customizable.
Zero Bloat: No unused components in bundle.
Built-in Accessibility: Keyboard navigation, focus control, ARIA attributes.
Strong TypeScript Support.

Engineering Decisions

Decimal Serialization

Prisma decimals can't be passed to client components. Built a data-boundary layer that converts decimals before reaching client while preserving backend precision.

Centralized Middleware

Locale detection.
Admin route protection.
Authentication checks. All in one place to reduce duplication and simplify debugging.

URL-Driven Search

Filters, search, and sorting in URL parameters with debounced updates. Fully shareable product URLs for better UX.

Features

Full RTL/LTR layout support.
Comprehensive admin dashboard for products, orders, and analytics.
Product variants with stock tracking.
Flexible coupons and discounts system.
Reviews and ratings.
Wishlist with one-click add to cart.
Dockerized production deployment.

What This Demonstrates

Secure handling of real payment systems with strict validation.
Production-level state management across guest and authenticated flows.
Server-first architecture for optimal performance.
Performance optimization under real-world constraints.
Clean separation of concerns across the entire stack.

This goes beyond CRUD—it reflects real engineering decisions, trade-offs, and scalability concerns for a production system.

Production Scale

15 Database Models
30+ API Endpoints
50+ Reusable Components
2 Languages (Arabic/English)
3 Payment Gateways
Background Workers with Redis
Docker-ready deployment