E-Commerce Web Application

قمت بتطوير موقع e-commerce باستخدام React لعرض وبيع المنتجات، حيث يسمح للمستخدمين بتصفح المنتجات، إضافة المنتجات إلى سلة التسوق، واستكمال عملية الشراء. تم تصميم الموقع بحيث يكون متجاوبًا وجذابًا، ويقدم تجربة مستخدم سلسة باستخدام CSS. لإدارة البيانات وحالة التطبيق، تم استخدام Context API. البيانات التي يتم عرضها، مثل المنتجات، تم جلبها من خلال واجهة برمجة التطبيقات (API).

الوظائف الرئيسية للموقع

الصفحة الرئيسية (Home):

تعرض المنتجات المميزة والعروض الحالية، ويتم جلب البيانات من API لعرضها بشكل ديناميكي.

صفحة المنتجات (Products):

تحتوي على قائمة بجميع المنتجات المتاحة. يتم جلب هذه المنتجات من خلال الاتصال بالـ API. تتضمن الصفحة خيارات لتصفية المنتجات حسب السعر أو الفئة.

صفحة تفاصيل المنتج (Product Details):

عند النقر على منتج معين، تنتقل إلى صفحة تفاصيل المنتج، التي تحتوي على معلومات أكثر تفصيلاً مثل الوصف، السعر، والمراجعات.

سلة التسوق (Cart):

يمكن للمستخدم إضافة المنتجات إلى سلة التسوق. يتم تخزين حالة السلة باستخدام Context API وإدارتها عبر التطبيق، مع إمكانية حفظ السلة في localStorage لعدم فقدان البيانات عند إعادة تحميل الصفحة.

صفحة الدفع (Checkout):

تتيح للمستخدمين إدخال معلومات الدفع واستكمال عملية الشراء. يمكن إرسال بيانات الشراء إلى الخادم من خلال API للتعامل مع الطلبات.

استخدام React

تقسيم المكونات (Components):

تم تقسيم الموقع إلى مكونات مستقلة قابلة لإعادة الاستخدام مثل ProductList (قائمة المنتجات)، ProductCard (بطاقة المنتج)، Cart (سلة التسوق)، وNavbar (شريط التنقل).

تم استخدام React Router للتنقل بين الصفحات المختلفة دون الحاجة إلى إعادة تحميل الصفحة بالكامل.

استخدام CSS

التصميم المتجاوب:

تم تصميم الموقع ليكون متجاوبًا مع مختلف الأجهزة باستخدام Flexbox وGrid.

تم اعتماد ألوان جذابة وتصميم أنيق يتناسب مع الهوية البصرية للموقع.

التفاعل مع المستخدم:

تم تصميم الأزرار والقوائم لتكون سهلة الاستخدام وتفاعلية، مع تأثيرات Hover وTransitions لتجربة مستخدم ممتعة.

إدارة الحالة باستخدام Context API

تم استخدام Context API لإدارة حالة التطبيق بشكل مركزي، مثل إدارة سلة التسوق:

سلة التسوق (Cart Context):

تخزين حالة المنتجات المضافة إلى السلة.

توفير دوال لإضافة وإزالة المنتجات من السلة.

يتم تخزين حالة السلة في localStorage بحيث تبقى البيانات محفوظة حتى بعد إغلاق المتصفح.

استخدام API لجلب البيانات

جلب البيانات من API:

تم استخدام Axios للاتصال بـ API الخارجي لجلب قائمة المنتجات وعرضها في واجهة المستخدم. يتم ذلك داخل المكون باستخدام useEffect لجلب البيانات عند تحميل الصفحة.

يتم تحديث واجهة المستخدم بناءً على الاستجابة من API، مع عرض حالة التحميل أو الأخطاء في حال فشل الجلب.