تطوير متجر إلكتروني متكامل باستخدام React 19 و Vite — FreshCart

أقدّم لكم مشروع FreshCart، وهو تطبيق متجر إلكتروني احترافي متكامل تمّ تصميمه وتطويره من الصفر باستخدام أحدث التقنيات في عالم تطوير واجهات الويب الأمامية. ━━━━━━━━━━━━━━━━━━━━ نبذة عن المشروع ━━━━━━━━━━━━━━━━━━━━ يُمثّل هذا المشروع منصة تسوّق إلكتروني شاملة تُحاكي تجربة المستخدم الحقيقية في المتاجر الرقمية الكبرى. يشمل التطبيق دورة شراء كاملة بدءًا من تصفّح المنتجات وصولًا إلى إتمام عملية الدفع وتتبّع الطلبات، مع واجهة مستخدم عصرية ومتجاوبة مع جميع أحجام الشاشات. ━━━━━━━━━━━━━━━━━━━━ الميزات الرئيسية ━━━━━━━━━━━━━━━━━━━━ ◾ نظام مصادقة آمن: تسجيل دخول وإنشاء حسابات مع التحقّق من صحة البيانات عبر مكتبتي Formik و Yup، وحماية المسارات باستخدام Guards. ◾ كتالوج منتجات ديناميكي: عرض تفاعلي للمنتجات مع إمكانية البحث اللحظي والتصفية حسب العلامة التجارية والفئة، مع تمرير تلقائي سلس نحو النتائج. ◾ سلة مشتريات متزامنة: مزامنة فورية مع الخادم عند كل عملية إضافة أو تعديل في الكمية، مما يضمن اتساق البيانات عبر جميع الأجهزة. ◾ نظام دفع مزدوج: دعم الدفع عند الاستلام (Cash on Delivery) والدفع الإلكتروني عبر Stripe مع إعادة توجيه آمنة لجلسة الدفع. ◾ سجل الطلبات: لوحة تحكّم شخصية لعرض الطلبات السابقة وحالة التوصيل. ◾ تصميم متجاوب بالكامل: تجربة مستخدم مُحسّنة على الهواتف والأجهزة اللوحية وأجهزة سطح المكتب. ━━━━━━━━━━━━━━━━━━━━ التقنيات المستخدمة ━━━━━━━━━━━━━━━━━━━━ • React 19 — إطار العمل الأساسي مع نظام Hooks المتقدّم • Vite — أداة بناء فائقة السرعة مع Hot Module Replacement • TanStack Query (React Query) — إدارة حالة الخادم مع التخزين المؤقت التلقائي • React Context API — إدارة الحالة العامة (المصادقة وسلة المشتريات) • Tailwind CSS — تصميم واجهات عصرية واحترافية • React Router Dom — توجيه ديناميكي مع حماية المسارات • Axios — اتصال موثوق مع واجهة برمجة التطبيقات (REST API) • Swiper.js — عروض شرائح تفاعلية وجذابة ━━━━━━━━━━━━━━━━━━━━ الجوانب الهندسية المتقدّمة ━━━━━━━━━━━━━━━━━━━━ • بنية مشروع مُنظّمة وفق نمط Feature-based Architecture • فصل كامل بين منطق الأعمال وعرض الواجهة (Separation of Concerns) • Custom Hooks قابلة لإعادة الاستخدام لتقليل التكرار البرمجي • معالجة احترافية للأخطاء وحالات التحميل • نشر مباشر على Vercel مع إعدادات SPA مُحسّنة ━━━━━━━━━━━━━━━━━━━━ هذا المشروع يعكس مستوى احترافيًا في تطوير تطبيقات الويب الأمامية، ويُظهر القدرة على بناء أنظمة متكاملة تجمع بين التعقيد التقني وسلاسة تجربة المستخدم.