دراسة حالة: متجر الزمالك

منصة تجارة إلكترونية جاهزة للإنتاج للسوق المصري

الدور: مطور واجهة كاملة (Full-Stack Developer) التقنيات: Next.js 16, React 19, TypeScript, PostgreSQL, Prisma, Redis, BullMQ, Docker المدفوعات: Paymob, Kashier, Stripe المعاينة الحية: zamalek-store.ahmedlotfy.site

بناء منصة تجارة إلكترونية للسوق المصري كان يتطلب حل ثلاث تحديات حاسمة: دعم ثنائي اللغة الحقيقي (RTL/LTR)، تكامل موثوق لبوابات الدفع المحلية، و أداء عالي على شبكات الهاتف مع صور منتجات كبيرة.

الهيكلية التقنية

اخترت Next.js App Router للاستفادة من React Server Components للتحميل الأولي السريع وتقليل حزم العميل، ونقل المنطق الثقيل إلى الخادم.

تصميم قاعدة البيانات

• PostgreSQL مع Prisma: 15 نموذجاً علائقياً تغطي المنتجات، المتغيرات، الطلبات، السلة، الكوبونات، المراجعات، والمستخدمين.
• ثنائية اللغة في المخطط: حقول name_ar و name_en بدلاً من كائنات JSON الهشة.
• إصدارات كاملة: تتبع جميع التغييرات عبر ترحيلات Prisma.

نظام السلة الهجين

• الزوار: السلة في localStorage للتفاعل الفوري.
• المسجلون: مزامنة السلة مع قاعدة البيانات.
• الدمج التلقائي: لا ضياع للعناصر عند تغيير الجهاز أو تسجيل الدخول.
• مرونة: تنجو من التحديث، تسجيل الخروج، وتغيير الأجهزة.

المعالجة الخلفية

نفذت BullMQ مع Redis للحفاظ على سرعة الدفع:

• إرسال رسائل تأكيد البريد الإلكتروني بشكل غير متزامن.
• إعادة المحاولة التلقائية مع تراجع أسي (Exponential Backoff).
• عملية عامل (Worker) معزولة ومنفصلة عن خادم الويب.
• عملية الدفع تظل فورية حتى تحت الضغط.

حلول رئيسية

أمان المدفوعات

تتطلب البوابات المحلية مثل Paymob تحققاً صارماً لمنع الاحتيال والمعالجة المزدوجة:

• التحقق من توقيع HMAC: التحقق من صحة كل Webhook.
• فحوصات التكرار (Idempotency): منع تكرار معالجة الطلب إذا أرسلت البوابة الإشعار أكثر من مرة.
• منطق تحقق مركزي: تدفق دفع آمن وقابل للتدقيق. تظل العمليات المالية موثوقة حتى عندما تتصرف البوابات بشكل غير متسق.

تحسين الصور

صور المنتجات عالية الدقة تقتل الأداء على شبكات الهاتف. قمت ببناء خط أنابيب تحسين من جانب العميل:

• التخزين على Cloudflare R2 لعدم وجود رسوم نقل بيانات.
• تغيير الحجم والضغط إلى WebP في المتصفح قبل الرفع.
• تقليل حجم الصورة من ~5 ميجابايت إلى ~200 كيلوبايت.
• رفع أسرع، تكلفة أقل، وصفحات منتجات فورية.

هندسة المكونات

استخدمت Shadcn UI مع Radix primitives بدلاً من أطر العمل الثقيلة:

• ملكية كاملة: المكونات تعيش في الكود، قابلة للتخصيص بالكامل.
• صفر تضخم (Zero Bloat): لا مكونات غير مستخدمة في الحزمة.
• إمكانية الوصول المدمجة: تنقل بلوحة المفاتيح، تحكم بالتركيز، وسمات ARIA.
• دعم TypeScript قوي.

قرارات هندسية

تسلسل الأرقام العشرية (Decimal Serialization)

لا يمكن تمرير أرقام Prisma العشرية لمكونات العميل. بنيت طبقة حدود بيانات تحول الأرقام قبل وصولها للعميل مع الحفاظ على الدقة في الخلفية.

البرمجيات الوسيطة المركزية (Middleware)

• كشف اللغة.
• حماية مسارات المسؤول.
• فحوصات المصادقة. كلها في مكان واحد لتقليل التكرار وتسهيل التصحيح.

بحث مدفوع بالرابط (URL-Driven)

الفلاتر، البحث، والترتيب في معلمات URL مع تحديثات (Debounced). روابط منتجات قابلة للمشاركة بالكامل لتجربة مستخدم أفضل.

المميزات

• دعم تخطيط كامل RTL/LTR.
• لوحة تحكم إدارية شاملة للمنتجات، الطلبات، والتحليلات.
• متغيرات المنتج مع تتبع المخزون.
• نظام مرن للكوبونات والخصومات.
• مراجعات وتقييمات.
• قائمة رغبات مع إضافة للسلة بنقرة واحدة.
• نشر إنتاج Dockerized.

ماذا يثبت هذا المشروع

• تعامل آمن مع أنظمة الدفع الحقيقية بتحقق صارم.
• إدارة حالة بمستوى الإنتاج عبر تدفقات الزوار والمسجلين.
• هندسة الخادم أولاً (Server-first) للأداء الأمثل.
• تحسين الأداء تحت قيود العالم الحقيقي.
• فصل نظيف للاهتمامات عبر المكدس بالكامل.

هذا يتجاوز تطبيقات CRUD—إنه يعكس قرارات هندسية حقيقية، ومفاضلات، ومخاوف قابلية التوسع لنظام إنتاج.

مقاييس الإنتاج

• 15 نموذج قاعدة بيانات
• 30+ نقطة API
• 50+ مكون قابل لإعادة الاستخدام
• 2 لغة (عربي / إنجليزي)
• 3 بوابات دفع
• عمال خلفية مع Redis
• نشر جاهز لـ Docker
• تنفيذ أتمتة السيو (SEO) لضمان اكتشاف المحتوى فورياً.