بروفا موقع تجارة الكترونيه فى مصر

•

Prova Store هو متجر إلكتروني متكامل مبني باستخدام React.js يقدم تجربة تسوق احترافية عبر الإنترنت. المشروع يستهدف السوق المصري ويدعم اللغتين العربية والإنجليزية بشكل كامل مع تبديل تلقائي لاتجاه الصفحة (RTL/LTR). ويستخدم Cloudinary لإدارة الصور.

________________________________________

المميزات الرئيسية

1. نظام المصادقة والأمان

تسجيل دخول وإنشاء حساب جديد بواجهة متحركة (Animated Sliding Panel)

استعادة كلمة المرور عبر 3 خطوات: نسيت كلمة المرور ← التحقق بـ OTP ← إعادة تعيين كلمة المرور

تشفير بيانات الجلسة باستخدام AES (CryptoJS) مع Zustand لإدارة الحالة

حماية الصفحات الخاصة (الملف الشخصي) بمكوّن ProtectedRoute

التحقق من صحة بيانات الإدخال على مستوى الحقول

2. دعم كامل للغة العربية والإنجليزية (i18n)

جميع النصوص مترجمة عبر react-i18next

تبديل تلقائي لاتجاه الصفحة RTL/LTR

أسماء المنتجات والفئات بالعربية والإنجليزية

اللغة الافتراضية: العربية

3. الصفحة الرئيسية واكتشاف المنتجات

بانر رئيسي متحرك (سلايدر) مع تدوير تلقائي

كوبونات ترويجية مع عداد تنازلي وزر نسخ كود الخصم

أقسام متعددة للمنتجات: العروض الساخنة (Hot Sale)، صفقات خارقة (Super Deals)، عروض اليوم (Today's Offers)

تسوق حسب الفئة: تبويبات للفئات مع سلايدر منتجات لكل فئة

المجموعات: تصفح حسب النساء، الرجال، الأطفال

المنتجات المشاهدة مؤخراً: للمستخدمين المسجلين

سلايدر البراندات: عرض شعارات العلامات التجارية

قسم الخدمات: عرض مميزات المتجر

4. بطاقة المنتج (Product Card)

تأثير تبديل الصور عند التمرير (Hover)

شارة نسبة الخصم

تقييم بالنجوم (1-5)

عرض السعر الأصلي والسعر بعد الخصم بالجنيه المصري

زر إضافة/إزالة من المفضلة (قلب)

زر إضافة إلى السلة

5. صفحة تفاصيل المنتج

معرض صور مع صور مصغرة للتنقل

اختيار المقاس واختيار اللون مع ألوان مرئية

محدد الكمية (زيادة/نقصان)

إضافة للسلة مع بيانات المقاس واللون والكمية

زر المشاركة وزر المفضلة

تاريخ التوصيل المتوقع

تبويبات: الوصف والمراجعات

نظام المراجعات: عرض وإضافة مراجعات مع تقييم بالنجوم (يتطلب تسجيل دخول)

منتجات مشابهة

روابط SEO-friendly باستخدام Slugs

6. تصفح الفئات والفئات الفرعية

قائمة تنقل بالفئات الرئيسية مع قائمة منسدلة

شريط تنقل لا نهائي للفئات الفرعية

فلترة متقدمة:

نطاق السعر (أدنى/أقصى)

المقاس

العلامة التجارية

اللون

نسبة الخصم

التقييم

ترقيم صفحات مع مزامنة الـ URL

تنقل بالمسار (Breadcrumb)

7. البحث

شريط بحث مع تأخير ذكي (Debounce 400ms)

صفحة نتائج البحث مع:

عدد النتائج

ترتيب: حسب الصلة، السعر (تصاعدي/تنازلي)، الاسم

ترقيم صفحات (12 منتج/صفحة)

8. سلة التسوق

مزامنة السلة مع السيرفر للمستخدمين المسجلين

إضافة/تعديل الكمية/حذف المنتجات مع تحديث فوري للواجهة

تأكيد قبل الحذف عبر نافذة تأكيد

ملخص الطلب: المجموع الفرعي + الشحن (60 ج.م) + الإجمالي

عرض تفاصيل المنتج: الصورة، الاسم، المقاس، اللون، الخصم

حالة سلة فارغة مع رسم توضيحي وزر "تابع التسوق"

عداد السلة في شريط التنقل (تحديث لحظي)

إشعارات فورية (Toast) لجميع عمليات السلة

9. قائمة المفضلة (Wishlist)

إضافة/إزالة من أي بطاقة منتج أو صفحة تفاصيل

صفحة المفضلة مع شبكة منتجات

زر "نقل إلى السلة"

عداد المفضلة في شريط التنقل

دعم التخزين المحلي (localStorage) للزوار غير المسجلين

10. عملية الدفع (Checkout)

خطوات متعددة مع مؤشر تقدم (Stepper):

الخطوة 1 — العنوان: اختيار عنوان محفوظ أو إضافة عنوان جديد (العنوان، المدينة، المنطقة، الدولة، نوع التوصيل: منزل/مكتب)

الخطوة 2 — الدفع: اختيار طريقة الدفع

طرق الدفع:

الدفع عند الاستلام (Cash on Delivery)

بطاقة ائتمان عبر Paymob (بوابة دفع إلكترونية)

حماية التنقل أثناء الدفع (تأكيد قبل مغادرة الصفحة)

استئناف الدفع للطلبات غير المدفوعة

ملخص الطلب الجانبي

11. الملف الشخصي

واجهة بتبويبات مع مزامنة الـ URL:

معلومات الحساب: تعديل الاسم، اللقب، رقم الهاتف

عناويني: إضافة/تعديل/حذف عناوين الشحن

طلباتي: سجل الطلبات السابقة

تغيير كلمة المرور: كلمة المرور القديمة والجديدة مع تأكيد

حذف الحساب: مع نافذة تأكيد

شريط جانبي مع ترحيب بالمستخدم وتنقل سريع

12. التذييل (Footer)

وصف المتجر ومعلومات الاتصال (بريد، هاتف، عنوان)

روابط مفيدة: الأسئلة الشائعة، من نحن، اتصل بنا، إرجاع الطلبات

نشرة بريدية مع التحقق من البريد الإلكتروني

روابط تحميل التطبيق (App Store + Google Play)

وسائل التواصل: فيسبوك، واتساب، إنستجرام، تيك توك

شريط أيقونات طرق الدفع

أقسام قابلة للطي على الموبايل

13. البنية التقنية

React 18 مع React Router v6

Zustand لإدارة حالة المصادقة مع تشفير

Axios كعميل HTTP للتواصل مع الـ API

Bootstrap 5 + React Bootstrap للواجهة

Material UI (MUI) لبعض المكونات

Swiper.js للسلايدرات

Cloudinary لتحسين وعرض الصور

Leaflet / Google Maps لعرض الخرائط

Docker للنشر (Dockerfile + Nginx + docker-compose)

14 وحدة API تغطي: المستخدمين، المنتجات، السلة، المفضلة، الطلبات، الكوبونات، المراجعات، الفئات، البراندات، السلايدرات، المقاسات، التقييمات

Custom Hooks: useAuth, useCartAuth, useDebounce, useToast