Mini-Shop | منصة تجارة إلكترونية متكاملة (Full-Stack E-commerce) - React & Laravel

تم تطوير منصة "Mini-Shop" كحل متكامل للتجارة الإلكترونية يجمع بين القوة في الأداء والمرونة في الاستخدام. يعتمد المشروع على Laravel كواجهة خلفية (Backend API) لإدارة البيانات والعمليات المعقدة، و React.js كواجهة أمامية (Frontend) لتقديم تجربة مستخدم تفاعلية وسلسة (SPA). يركز النظام على الأمان، سرعة الأداء، وتجربة المستخدم المميزة مع لوحة تحكم شاملة للإدارة.

أهم المميزات التقنية والوظيفية:

1. الواجهة الأمامية (Frontend - React.js):

تصميم عصري ومتجاوب: تم بناء الواجهة باستخدام Tailwind CSS لضمان عمل الموقع بكفاءة على جميع الأجهزة (موبايل، تابلت، ديسكتوب).

إدارة الحالة (State Management): استخدام Context API لإدارة حالة سلة التسوق (Cart) بشكل عالمي في التطبيق، مما يسمح بتحديث الكميات والأسعار لحظياً.

انتقالات سلسة: تطبيق تأثيرات حركية عند التنقل بين الصفحات باستخدام مكتبة Framer Motion ومكون AnimatePresence.

نظام التوجيه والحماية: استخدام React Router v6 لإدارة الروابط، مع إنشاء مكون AdminRoute خاص لحماية صفحات لوحة التحكم ومنع الوصول غير المصرح به.

تجربة المستخدم (UX): إضافة مؤشرات تحميل (Loading Spinners) ومعالجة الأخطاء (Error Handling) لعرض رسائل واضحة للمستخدم في حال فشل تسجيل الدخول أو تحميل المنتجات.

2. الواجهة الخلفية (Backend - Laravel):

API متكامل: بناء RESTful API قوية تخدم تطبيقات الواجهة الأمامية.

نظام المصادقة (Authentication): استخدام Laravel Sanctum لتأمين الـ API وإدارة توكنات المستخدمين (Tokens) للجلسات الآمنة.

إدارة الطلبات المتقدمة: معالجة الطلبات باستخدام Database Transactions لضمان سلامة البيانات (Data Integrity) عند إنشاء الطلب وتفاصيله وحذف السلة في عملية واحدة.

نظام الصلاحيات (Authorization): نظام أدوار يتحقق مما إذا كان المستخدم "Admin" أو "Owner" للسماح بعمليات حساسة مثل حذف المستخدمين أو تعديل المنتجات.

مزامنة السلة (Cart Synchronization): ميزة متقدمة تقوم بدمج سلة التسوق المخزنة محلياً (LocalStorage) مع قاعدة البيانات بمجرد تسجيل دخول المستخدم.

3. لوحة تحكم الإدارة (Admin Dashboard):

واجهة مخصصة للمدراء تتيح إدارة كاملة للمنتجات (إضافة، تعديل، حذف).

إدارة المستخدمين والتحكم في صلاحياتهم (تحويل المستخدمين إلى مشرفين).

التقنيات المستخدمة (Tech Stack):

Front-End:

React.js (Vite)

Tailwind CSS (Styling)

Framer Motion (Animations)

Axios (HTTP Client)

React Router DOM

Heroicons (Icons)

Back-End:

Laravel (PHP Framework)

MySQL (Database)

Laravel Sanctum (API Security)

ما يميز هذا المشروع:

مزامنة البيانات: الحل الذكي لمشكلة فقدان سلة التسوق عند تسجيل الدخول، حيث يتم رفع المنتجات من جهاز المستخدم إلى الخادم تلقائياً.

الأمان: حماية المسارات (Routes) في كل من الـ Frontend والـ Backend لضمان عدم وصول أي مستخدم غير مصرح له للبيانات الحساسة.

الأداء: تحميل سريع للصفحات بفضل بنية الـ Single Page Application (SPA).