Prova Store هو متجر إلكتروني متكامل مبني باستخدام React.js يقدم تجربة تسوق احترافية عبر الإنترنت. المشروع يستهدف السوق المصري ويدعم اللغتين العربية والإنجليزية بشكل كامل مع تبديل تلقائي لاتجاه الصفحة (RTL/LTR). ويستخدم Cloudinary لإدارة الصور.
________________________________________
المميزات الرئيسية
1. نظام المصادقة والأمان
تسجيل دخول وإنشاء حساب جديد بواجهة متحركة (Animated Sliding Panel)
استعادة كلمة المرور عبر 3 خطوات: نسيت كلمة المرور ← التحقق بـ OTP ← إعادة تعيين كلمة المرور
تشفير بيانات الجلسة باستخدام AES (CryptoJS) مع Zustand لإدارة الحالة
2. دعم كامل للغة العربية والإنجليزية (i18n)
جميع النصوص مترجمة عبر react-i18next
تبديل تلقائي لاتجاه الصفحة RTL/LTR
أسماء المنتجات والفئات بالعربية والإنجليزية
اللغة الافتراضية: العربية
3. الصفحة الرئيسية واكتشاف المنتجات
بانر رئيسي متحرك (سلايدر) مع تدوير تلقائي
كوبونات ترويجية مع عداد تنازلي وزر نسخ كود الخصم
أقسام متعددة للمنتجات: العروض الساخنة (Hot Sale)، صفقات خارقة (Super Deals)، عروض اليوم (Today's Offers)
تسوق حسب الفئة: تبويبات للفئات مع سلايدر منتجات لكل فئة
المجموعات: تصفح حسب النساء، الرجال، الأطفال
المنتجات المشاهدة مؤخراً: للمستخدمين المسجلين
سلايدر البراندات: عرض شعارات العلامات التجارية
قسم الخدمات: عرض مميزات المتجر
4. بطاقة المنتج (Product Card)
5. صفحة تفاصيل المنتج
6. تصفح الفئات والفئات الفرعية
قائمة تنقل بالفئات الرئيسية مع قائمة منسدلة
شريط تنقل لا نهائي للفئات الفرعية
فلترة متقدمة:
نطاق السعر (أدنى/أقصى)
المقاس
العلامة التجارية
اللون
نسبة الخصم
التقييم
ترقيم صفحات مع مزامنة الـ URL
تنقل بالمسار (Breadcrumb)
7. عملية الدفع (Checkout)
خطوات متعددة مع مؤشر تقدم (Stepper):
الخطوة 1 — العنوان: اختيار عنوان محفوظ أو إضافة عنوان جديد (العنوان، المدينة، المنطقة، الدولة، نوع التوصيل: منزل/مكتب)
الخطوة 2 — الدفع: اختيار طريقة الدفع
طرق الدفع:
الدفع عند الاستلام (Cash on Delivery)
بطاقة ائتمان عبر Paymob (بوابة دفع إلكترونية)
حماية التنقل أثناء الدفع (تأكيد قبل مغادرة الصفحة)
استئناف الدفع للطلبات غير المدفوعة
ملخص الطلب الجانبي
13. البنية التقنية
React 18 مع React Router v6
Zustand لإدارة حالة المصادقة مع تشفير
Axios كعميل HTTP للتواصل مع الـ API
Bootstrap 5 + React Bootstrap للواجهة
Material UI (MUI) لبعض المكونات
Swiper.js للسلايدرات
