كل المشاريع/HG NORTHCRAFTS

نظرة عامة

HG NorthCrafts متجر إلكتروني متكامل لعلامة تجارية للمنتجات المصنوعة يدويًا من الفئة الفاخرة، صُمّم وبُني من البداية إلى النهاية ضمن ارتباط عمل حرّ. يقدّم تطبيق أحادي الصفحة مبنيّ بـ React تجربة التسوّق — الكتالوج، وتفاصيل المنتج، والسلة، والبحث، وطلبات التصنيع حسب الطلب، ومنطقة الحساب — فوق واجهة برمجة Django 5 + DRF تضمّ أكثر من 30 نقطة وصول مُصادَقة بالرموز ومحدودة المعدّل.

جولة توضيحية

3 مقاطع قصيرة عن المنتج — اسحب أو استخدم الأسهم للتنقل بينها.

01 / 0330-Second Pitch

التحدي

احتاجت العلامة التجارية إلى أكثر من متجر جاهز القالب — إلى متجر سريع وموثوق ومملوك بالكامل، قادر على استقبال أموال حقيقية بأمان، ويمكن لمهندس واحد تشغيله وشحنه. وعنى ذلك فصلًا نظيفًا بين واجهة أمامية سريعة بـ React وواجهة برمجة مُحصَّنة، وعملية دفع لا تثق بالعميل في حالة الدفع إطلاقًا، وتحديدًا لمعدّل الطلبات يكبح إساءة الاستخدام، ونموذج تشغيل تكفي فيه عملية git push واحدة لإعادة بناء المنظومة القائمة على الحاويات كاملة وترحيلها وإعادة نشرها مع TLS — كل ذلك على بنية VPS اقتصادية بدلًا من منصّة مُدارة.

تصميم النظام

كيف يعمل

01/04
01

من التصفّح إلى دفع آمن

كيف ينتقل الزائر من الكتالوج إلى طلب مدفوع دون أن يُوثَق بالعميل في حالة الدفع إطلاقًا.

  1. 1يتصفّح الزائر متجر React — الكتالوج والبحث وتفاصيل المنتج — مقدَّمًا من ملفات ثابتة مخزّنة مؤقتًا خلف Nginx
  2. 2تُبنى السلة بإضافة المنتجات؛ وعند الدفع يستدعي العميل واجهة البرمجة التي تُسعّر الطلب على جانب الخادم
  3. 3يُنشئ النظام الخلفي طلب PayPal على جانب الخادم ويعيده إلى العميل للموافقة عليه
  4. 4وعند الموافقة يُحصّل النظام الخلفي دفعة PayPal ويتحقّق منها قبل وسم الطلب بأنه مدفوع
  5. 5تُدرَج رسالة تأكيد في طابور Celery ويُسجَّل الطلب على حساب العميل
02

طلب تصنيع حسب الطلب

كيف يطلب العميل قطعة يدوية مخصّصة وكيف يصل طلبه إلى المتجر للمتابعة.

  1. 1يفتح العميل صفحة الطلبات المخصّصة ويصف القطعة التي يريدها
  2. 2يُرسَل الطلب إلى نقطة وصول مُصادَقة بالرموز ويُحفَظ على حسابه
  3. 3تُرسَل رسالة إشعار إلى المتجر بشكل غير متزامن عبر Celery
  4. 4يراجع المتجر الطلب ويتابعه، محوّلًا إياه إلى عرض سعر أو طلب شراء
03

طلب API مُصادَق ومحدود المعدّل

كيف يُصادَق كل استدعاء لواجهة البرمجة ويُحدَّد معدّله ويُخدَم — من المتصفّح إلى العتاد الفعلي، خلال أجزاء من الألف من الثانية.

  1. 1يستدعي تطبيق React أحادي الصفحة واجهة البرمجة عبر HTTPS؛ فيُنهي Nginx اتصال TLS ويُمرّره إلى Gunicorn
  2. 2يُصادق Django REST على الرمز ويفحص عدّاد تحديد المعدّل الخاص بنقطة الوصول في Redis
  3. 3تقرأ دالة العرض أو تكتب الطلبات والكتالوج في PostgreSQL، مستخدمةً Redis للقراءات المتكرّرة
  4. 4تعود الاستجابة سريعًا؛ ويُسلَّم أي بريد أو عمل ثقيل إلى Celery خارج مسار الطلب
04

عملية push واحدة تشحن المنظومة كاملة

كيف تُعيد عملية git push واحدة بناء المنظومة القائمة على الحاويات كاملة ونشرها وتأمينها دون أي خطوات يدوية.

  1. 1تُطلق عملية push إلى فرع main مسار GitLab CI/CD الذي يبني صورة Docker
  2. 2ينقل المسار الإصدار عبر rsync على SSH إلى خادم VPS ويشغّل docker compose up
  3. 3تُنفَّذ عمليات الترحيل وcollectstatic، ثم يُعاد تحميل Nginx بشهادة TLS مجدَّدة عبر Certbot
  4. 4ويصبح الإصدار الجديد مباشرًا في تدفّق واحد — بناء ونشر وترحيل وتأمين — من البداية إلى النهاية

أبرز الميزات

  • مسار تسوّق كامل — تصفّح الكتالوج، وتفاصيل المنتج، والبحث، والسلة، وعملية دفع آمنة متعدّدة الخطوات
  • مدفوعات PayPal يتحقّق منها الخادم، مع حالة طلب لا تُؤخذ من العميل أبدًا
  • طلبات تصنيع حسب الطلب للقطع اليدوية المخصّصة، تُلتقط وتُوجَّه إلى المتجر
  • منتجات حصرية ومختارة مُنتقاة بعناية، ومعرض بصري للمنتجات
  • منطقة حساب تشمل التسجيل وتسجيل الدخول وسجلّ الطلبات عبر نقاط وصول مُصادَقة بالرموز
  • تحديد لمعدّل الطلبات وإدارة للجلسات مدعومان بـ Redis لكبح إساءة الاستخدام وإبقاء واجهة البرمجة سريعة الاستجابة
  • بريد معاملاتي (تأكيدات الطلبات، والتواصل) ومهام مجدولة على Celery + Beat
  • متجر متجاوب بالكامل بتصميم داكن بلمسات ذهبية، مع آراء العملاء وقصصهم والأسئلة الشائعة ومعلومات الشحن

Outcomes

  • سلّمتُ متجرًا متكاملًا مملوكًا بالكامل من البداية إلى النهاية — واجهة أمامية بـ React، وواجهة برمجة Django/DRF، والمدفوعات، والبريد، والتشغيل — ضمن ارتباط عمل حرّ نفّذه مهندس واحد
  • جعلتُ عملية الدفع آمنة بإبقاء مرجعية حالة الدفع لدى الخادم: تُحصَّل طلبات PayPal ويُتحقّق منها على جانب الخادم قبل وسم أي طلب بأنه مدفوع
  • أبقيتُ واجهة البرمجة سريعة الاستجابة ومقاومة لإساءة الاستخدام عبر تحديد المعدّل والجلسات المدعومَين بـ Redis، ونقلتُ البريد والمهام المجدولة خارج مسار الطلب إلى Celery + Beat
  • اختزلتُ عمليات النشر في عملية git push واحدة: مسار GitLab CI/CD قائم على Docker يبني ويشحن إلى خادم VPS ويُرحّل ويجدّد شهادة TLS دون أي خطوات يدوية

أعمال أخرى

Mashoor preview
سوق متعدّد البائعين

Mashoor

سوق متعدّد البائعين ثنائي اللغة وجاهز للاتجاه من اليمين إلى اليسار، لمنتجات باكستان الإقليمية المميّزة

عرض المشروع
Makkenha preview
سوق إلكتروني

Makkenha

سوق لقطع غيار السيارات في السعودية بنموذج الدفع بعد تأكيد التوفّر

عرض المشروع