Full stack e-commerce Laravel & Vue

قمت بعمل متجر الكتروني باستخدام

Laravel 11+ (Backend API), Vue.js 3 (Frontend SPA), Inertia.js (Bridge), Pinia (State Management), Tailwind CSS (Styling), QuillJS (Rich Text Editor), Laravel Sanctum (API Auth).

I. واجهة المتجر للعميل (Client-Facing Store)

الواجهة الأمامية للمتجر مصممة لتوفير تجربة تسوق سهلة وسلسة للزوار والعملاء، مع تصميم متجاوب وجذاب.

1. الميزات العامة:

تصميم متجاوب (Responsive Design): يتكيف مع جميع أحجام الشاشات (كمبيوتر مكتبي، تابلت، جوال).

نظام مصادقة متكامل:

تسجيل الدخول، إنشاء حساب جديد، استعادة كلمة المرور.

يظهر اسم المستخدم المسجل دخوله بدلاً من روابط الدخول/التسجيل.

شريط تنقل موحد: يظهر في جميع الصفحات ويوفر روابط سريعة للمتجر والصفحات الثابتة وحساب العميل.

2. تصفح المنتجات:

الصفحة الرئيسية للمنتجات (/store):

عرض المنتجات في شبكة (Grid View) جذابة.

خاصية البحث الفوري عن المنتجات بالاسم (Live Search).

التنقل بين الصفحات (Pagination) لسهولة تصفح المنتجات الكثيرة.

صفحة تفاصيل المنتج (/store/{product_slug}):

عرض صور المنتج، الاسم، السعر، الوصف، القسم التابع له.

إظهار حالة المخزون (متوفر/نفد).

3. سلة التسوق (Shopping Cart):

إضافة المنتجات: زر "أضف إلى السلة" في صفحة تفاصيل المنتج.

أيقونة السلة: تظهر في الشريط العلوي مع عداد يوضح عدد المنتجات في السلة.

صفحة السلة (/cart):

جدول يعرض المنتجات المضافة مع الصورة، السعر، الكمية، والإجمالي الجزئي.

القدرة على تعديل كمية المنتج مباشرة.

القدرة على حذف منتج من السلة.

زر "مسح السلة" لمسح جميع المحتويات.

عرض الإجمالي الكلي للسلة (المنتجات + الشحن).

تخزين السلة الذكي:

للضيوف: يتم تخزين السلة في جلسة المتصفح (Session) بشكل مؤقت.

للمستخدمين المسجلين: يتم حفظ السلة في قاعدة البيانات بشكل دائم، ويتم دمجها تلقائيًا عند تسجيل الدخول من أجهزة مختلفة.

4. عملية إتمام الشراء (Checkout Flow - مبسطة):

نموذج متعدد الخطوات (/checkout):

الخطوة 1: العنوان: اختيار عنوان شحن موجود (إذا كان العميل مسجلاً) أو إضافة عنوان جديد.

الخطوة 2: الشحن: تحديد طريقة الشحن (حالياً "شحن عادي").

الخطوة 3: الدفع: اختيار طريقة الدفع (بطاقة ائتمان - نموذج وهمي، أو الدفع عند الاستلام).

الخطوة 4: المراجعة: مراجعة شاملة للطلب قبل التأكيد النهائي.

التحقق من البيانات: يتم التحقق من صحة جميع المدخلات (عنوان، بطاقة، كميات) وإظهار رسائل خطأ واضحة تحت الحقول.

تأكيد الطلب: بعد إتمام الدفع، يتم إنشاء الطلب، وتحديث المخزون، ويتم توجيه العميل إلى صفحة تأكيد الطلب.

5. الصفحات الثابتة (CMS):

عرض ديناميكي: عرض الصفحات مثل "من نحن"، "سياسة الخصوصية"، "الشروط والأحكام" بمحتوى يتم إدارته بالكامل من لوحة التحكم.

CSS مخصص: كل صفحة يمكن أن تحتوي على CSS خاص بها لتخصيص التصميم.

6. نظام التواصل (Contact Us):

نموذج اتصال: صفحة "اتصل بنا" تتيح للزوار والعملاء إرسال رسائل.

سجل الرسائل: للمستخدمين المسجلين، يتم عرض سجل برسائلهم السابقة وردود الإدارة، مما يوفر تجربة تتبع.

II. لوحة تحكم المدير/الأدمن (Admin Panel)

واجهة محمية مصممة لتمكين المدراء والأدمن من إدارة جميع جوانب المتجر.

1. نظام الأدوار والصلاحيات:

ثلاثة أدوار: user (مستخدم عادي)، manager (مدير)، admin (أدمن).

صلاحيات محددة:

الأدمن: وصول كامل إلى جميع أقسام لوحة التحكم وجميع عمليات CRUD.

المدير: وصول للقراءة فقط إلى معظم الأقسام (مثل إدارة المستخدمين والمنتجات والطلبات)، ولا يمكنه إجراء تعديلات أو حذف.

المستخدم العادي: لا يمكنه الوصول إلى أي جزء من لوحة التحكم.

حماية قوية: جميع مسارات لوحة التحكم محمية بـ middleware يضمن صلاحيات الوصول.

2. شريط التنقل الإداري:

شريط تنقل علوي مخصص للمدراء والأدمن يتيح الوصول السريع إلى:

لوحة التحكم (Dashboard)

إدارة المستخدمين

إدارة المنتجات

إدارة الطلبات

إدارة الصفحات

الرسائل الواردة

إعدادات الشحن

زر تبديل: الأدمن والمدير يمكنهم التبديل بين شريط التنقل الإداري وشريط التنقل الخاص بواجهة العميل.

3. إدارة المستخدمين:

عرض شامل لجميع المستخدمين المسجلين.

إمكانية ترقية/تخفيض أدوار المستخدمين (أدمن، مدير، مستخدم).

حذف المستخدمين (مع قيود أمنية: لا يمكن للأدمن حذف نفسه أو أدمن آخر).

4. إدارة الكتالوج (المنتجات والأقسام):

نظام إدارة المنتجات:

إنشاء، قراءة، تحديث، حذف (CRUD) للمنتجات.

تحميل صور المنتجات (مع معالجة وحفظ في التخزين).

تحديد الكمية المتاحة والحالة (نشط/غير نشط).

البحث والترقيم (Pagination).

الحذف المجمع: القدرة على تحديد وحذف عدة منتجات دفعة واحدة.

إدارة الأقسام (مدمجة):

إنشاء، تعديل، حذف (CRUD) لأقسام المنتجات مباشرة من نفس صفحة إدارة المنتجات.

يتم تحديث قائمة الأقسام ديناميكيًا في نماذج المنتجات.

5. إدارة الطلبات:

عرض شامل للطلبات: جدول يعرض الطلبات مع معلومات العميل، الإجمالي، الحالة، وتاريخ الطلب.

تفاصيل الطلب: صفحة مخصصة لعرض تفاصيل كل طلب (المنتجات المشتراة، الكميات، الأسعار، معلومات العميل).

تغيير حالة الطلب: القدرة على تحديث حالة الطلب (قيد المعالجة، تم الشحن، مكتمل، ملغى).

سجل حالة الطلب: يتم تسجيل كل تغيير في حالة الطلب، مع عرض المستخدم الذي قام بالتغيير والتاريخ، لتتبع كامل.

6. إدارة المحتوى (CMS - Page Builder):

بناء الصفحات بالـ UI: واجهة سهلة الاستخدام لإنشاء وتعديل الصفحات الثابتة (مثل من نحن، سياسة الخصوصية) باستخدام نظام الكتل (نص، صور).

محرر نصوص غني (QuillJS): لإنشاء محتوى نصي منسق داخل الكتل.

تحكم كامل: إضافة، حذف، إعادة ترتيب الكتل.

إدارة CSS المخصص: حقل لإضافة CSS خاص بكل صفحة.

7. إدارة الرسائل (اتصل بنا):

قائمة بجميع رسائل التواصل الواردة.

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

وضع علامة "مقروءة" على الرسائل.

حذف الرسائل.

8. إعدادات الشحن:

صفحة مخصصة لإدارة طرق الشحن المتاحة في المتجر (الاسم، الوصف، التكلفة، الحالة نشط/غير نشط).

III. جوانب تقنية وأمنية:

Laravel Sanctum: لتأمين الـ API وطلبات SPA (بما في ذلك CSRF Token).

CSRF Token Refresh: آلية لتحديث CSRF Token تلقائيًا في الخلفية لمنع أخطاء 419 Page Expired.

Mass Assignment Protection: استخدام $fillable في الموديلات لمنع ثغرات الأمان.

Validation: التحقق من صحة جميع المدخلات في الـ Backend لضمان سلامة البيانات.

Error Handling: عرض رسائل خطأ واضحة للمستخدم في الواجهة الأمامية.

ملخص:

لقد قمت ببناء أساس متين وقوي لمتجر إلكتروني حديث، يغطي جميع الجوانب الأساسية من واجهة العميل وحتى إدارة لوحة التحكم المتقدمة. هذا المشروع يمثل إنجازًا تقنيًا كبيرًا.