تم تطوير تطبيق ويب للتجارة الإلكترونية متعدد الصفحات (MPA) يهدف إلى توفير تجربة تسوق منظمة وآمنة عبر صفحات مخصصة. هذا المشروع يبرهن على إتقاني في دمج مكتبة React.js لبناء واجهات مستخدم معقدة وتفاعلية ضمن بيئة متعددة الصفحات، بالإضافة إلى إدارتي الفعالة للحالة والتصميم المتجاوب.
(Technical Stack)
الواجهة الأمامية (Front-End):
React.js: استُخدمت لبناء مكونات الواجهة الأمامية (UI Components) المعقدة مثل سلة التسوق الديناميكية، وعارض المنتجات، ونماذج الدفع، مما يضمن تفاعلية عالية داخل كل صفحة.
Redux (مع Redux Thunk/Saga): لإدارة الحالة المركزية والتنبؤية، وهو ضروري للتعامل مع تدفق البيانات المشتركة (ككتالوج المنتجات وسلة التسوق) عبر المكونات المختلفة.
HTML5 & CSS3: لتوفير الهيكل الأساسي والتصميم المخصص.
Bootstrap: استخدام إطار العمل لتطبيق مبدأ "التصميم أولاً للجوال" (Mobile-First) وضمان التوافق التام مع مختلف أحجام الشاشات.
JavaScript (ES6+): لغة البرمجة الأساسية لتنفيذ منطق الواجهة الأمامية وتفاعل المكونات.
الميزات الرئيسية:
بنية متعددة الصفحات (MPA Architecture): تصميم وتنفيذ تطبيق يعتمد على صفحات منفصلة (كصفحة الكتالوج، صفحة المنتج، سلة التسوق، الدفع)، مما يعزز من وضوح محركات البحث (SEO).
تصميم متجاوب (Responsive Design): تطبيق تصميم Mobile-First باستخدام Bootstrap و CSS مخصص لضمان تجربة مستخدم موحدة ومثالية على أجهزة سطح المكتب، الأجهزة اللوحية، والهواتف المحمولة.
كتالوج المنتجات الديناميكي: جلب وعرض مجموعة واسعة من المنتجات باستخدام مكونات React، مع تفعيل ميزات التصفية (Filtering) والفرز (Sorting) الفعالة.
إدارة سلة التسوق (Shopping Cart): السماح للمستخدمين بإضافة، إزالة، وتحديث كميات العناصر. تتم إدارة حالة السلة بشكل مركزي وموثوق عبر Redux.
عملية الدفع الآمنة (Checkout Process): تصميم نموذج دفع متعدد الخطوات يتولى إدخال تفاصيل الشحن، خيارات الدفع، وتوليد ملخص الطلب النهائي.
يوضح هذا المشروع خبرتي وكفاءتي في:
بناء مكونات قابلة لإعادة الاستخدام (Reusable) وتحافظ على الحالة (Stateful Components) باستخدام React ضمن هيكل MPA.
تطبيق حلول قابلة للتطوير (Scalable) لإدارة الحالة على مستوى التطبيق باستخدام Redux.
التعامل مع بيئة متعددة الصفحات وتقديم تفاعل واجهة مستخدم (UI Interactivity) عالي الجودة.
إنشاء واجهات مستخدم دقيقة ومتجاوبة بشكل مثالي باستخدام HTML5، CSS، وإطار عمل Bootstrap.
