Electronics Store – متجر إلكتروني
تفاصيل العمل
هذا المشروع عبارة عن تطبيق ويب لمتجر إلكتروني متكامل تم بناؤه باستخدام React. يتيح المشروع تجربة تسوق كاملة للمستخدمين مع العديد من الميزات والوظائف المتقدمة.
الميزات الرئيسية للمشروع
1. نظام المصادقة المتكامل
- تسجيل الدخول وإنشاء الحسابات: يمكن للمستخدمين إنشاء حسابات جديدة وتسجيل الدخول.
- التحقق من البيانات: يستخدم مكتبات Formik وYup للتحقق من صحة نماذج التسجيل وتسجيل الدخول.
- تخزين البيانات محليًا: يتم حفظ بيانات المستخدم في local Storage للاحتفاظ بالجلسة.
- المسارات المحمية: صفحات المتجر محمية وتتطلب تسجيل الدخول للوصول إليها.
2. عرض المنتجات والتصفح
- الصفحة الرئيسيئ: تعرض قائمة بجميع المنتجات المتاحة مع إمكانية التصفية حسب الفئة.
- صفحات تفاصيل المنتج: توفر معلومات تفصيلية عن كل منتج مع الصور والأسعار والتقييمات.
- بطاقات المنتجات: تعرض معلومات المنتج بطريقة جذابة مع صور وأسعار وتقييمات.
- فئات المنتجات: يتم تصنيف المنتجات إلى إلكترونيات، ملابس رجالية، ملابس نسائية، ومجوهرات.
3. سلة التسوق المتكاملة
- إضافة منتجات: يمكن للمستخدمين إضافة منتجات إلى سلة التسوق مباشرة من صفحة المنتج أو الصفحة الرئيسية.
- تعديل الكميات: يمكن زيادة أو تقليل كمية المنتجات في السلة.
- إزالة المنتجات: يمكن إزالة المنتجات من السلة.
- حساب الإجمالي: حساب المجموع الكلي للمشتريات مع الضريبة والشحن.
- الاحتفاظ بالسلة: يتم حفظ محتويات السلة في local Storage للاحتفاظ بالبيانات بين الجلسات.
4. واجهة مستخدم متجاوبة
- تصميم متجاوب: يعمل بشكل جيد على الأجهزة المختلفة (جوال، حاسوب لوحي، حاسوب مكتبي).
- تصميم Bootstrap: استخدام Bootstrap للحصول على واجهة مستخدم جذابة وعصرية.
- أيقونات وتنسيقات: استخدام Bootstrap Icons لإضافة أيقونات للأزرار والعناصر المختلفة.
- إشعارات وتنبيهات: إشعارات للمستخدم عند إضافة المنتجات إلى السلة أو عند تسجيل الدخول.
5. إدارة الحالة والسياق
- Context API: استخدام Context API في React لإدارة حالة المستخدم والسلة على مستوى التطبيق.
- Hooks مخصصة: تم إنشاء hooks مخصصة مثل useAuth وuseCart للوصول إلى وظائف المصادقة والسلة.
6. التكامل مع API خارجي
-Fake Store API: يستخدم المشروع Fake Store API للحصول على بيانات المنتجات.
- التعامل مع الطلبات يتضمن التعامل مع حالات التحميل والأخطاء عند جلب البيانات.
7. التنقل والمسارات
- React Router: استخدام React Router للتنقل بين صفحات التطبيق.
- المسارات المتعددة: مسارات للصفحة الرئيسية، تفاصيل المنتج، السلة، تسجيل الدخول، إنشاء حساب.
- صفحة 404: صفحة خاصة لعرضها عند الانتقال إلى مسار غير موجود.
8. واجهة المستخدم والمكونات
- شريط التنقل: يعرض روابط للصفحة الرئيسية والفئات والعروض وصفحة الاتصال، بالإضافة إلى روابط تسجيل الدخول والسلة.
- تذييل الصفحة: يحتوي على روابط سريعة ومعلومات الاتصال ووسائل التواصل الاجتماعي.
- مؤشرات التحميل: عرض مؤشرات التحميل عند جلب البيانات.
- إشعارات: إشعارات تظهر عند إضافة منتج للسلة أو تسجيل الدخول.
التقنيات المستخدمة
- React: الإطار الرئيسي لبناء واجهة المستخدم.
- React Router: للتنقل بين الصفحات.
- Context API: لإدارة الحالة على مستوى التطبيق.
- Bootstrap: لتنسيق وتصميم واجهة المستخدم.
- Formik & Yup: للتحقق من صحة النماذج.
- React Toastify: لعرض الإشعارات.
-Fetch API: للتعامل مع الطلبات الخارجية.
- local Storage: لتخزين بيانات المستخدم ومحتويات السلة محليًا.
هيكل المشروع
المشروع منظم بطريقة منهجية مع فصل المكونات والسياقات والصفحات في ملفات منفصلة:
- المكونات: Navbar, Product Card, Home Page, Product Detail Page, Cart, Footer, وغيرها.
-نماذج: Login, Signup لإدارة تسجيل المستخدمين.
- السياقات: Auth Context للمصادقة، Cart Context لإدارة سلة التسوق.
- المكونات المساعدة: Spinner للتحميل، Protected Route للمسارات المحمية.
هذا المشروع يقدم تجربة تسوق متكاملة عبر الإنترنت مع واجهة مستخدم سهلة الاستخدام وميزات احترافية، مما يجعله مثالًا جيدًا لتطبيقات التجارة الإلكترونية الحديثة المبنية بـ React.