Salla Merchants - تجّار سلة

Salla — تطبيق ويب حديث ومتجاوب للتجارة الإلكترونية، تم بناؤه باستخدام React و JavaScript و Tailwind CSS.

يُقدّم المشروع بنية متكاملة للواجهة الأمامية تعتمد على مكوّنات قابلة لإعادة الاستخدام، ونظام فلترة متقدم للمنتجات، مع إدارة بيانات دائمة عبر Local Storage — مصمَّم لمحاكاة تجربة تجارة إلكترونية حقيقية واحترافية.

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

️ مكوّنات قابلة لإعادة الاستخدام – واجهة متناسقة وسهلة الصيانة عبر جميع الصفحات.

️ عرض ديناميكي للمنتجات – يتحكم فيه بالكامل من خلال الـ props:

• التحريك (AOS, delay)

• نمط العرض (شبكي أو قائم)

• الترتيب العشوائي (Shuffle)

• تحديد عدد المنتجات (ProductsNum)

نظام فلترة متكامل

• الفلترة حسب الفئة، العلامة التجارية، نطاق السعر، اللون، والتقييم.

• مكوّنات فلترة قابلة لإعادة الاستخدام (FilterList, CategoryFilter وغيرها).

تكامل مع LocalStorage

• يعمل كـ واجهة خلفية خفيفة.

• حفظ المنتجات المفضلة وسلة المشتريات بشكل دائم.

إدارة سلة المشتريات

• إضافة / إزالة المنتجات.

• التحكم في الكمية.

• تعطيل زر الإضافة تلقائيًا أثناء المعالجة.

️ نظام المفضلة

• إضافة وإزالة العناصر فورًا مع تحديث واجهة المستخدم بشكل مباشر.

تحسين الأداء

• استخدام useMemo و React.memo لتقليل عمليات إعادة التصيير غير الضرورية.

حركات وانتقالات سلسة

• مؤثرات بصرية انسيابية باستخدام Framer Motion و AOS.

? توجيه وصفحات ديناميكية

• صفحات تفاصيل المنتجات باستخدام معاملات في الـ URL.

• صفحات ديناميكية لسلة المشتريات والمفضلة.

صفحة خطأ مخصصة (404)

• تصميم مخصص لتجربة مستخدم أفضل عند الصفحات غير الموجودة.

حركات تحميل تفاعلية

• إشعارات بصرية مريحة أثناء تحميل البيانات أو عرض المحتوى.