إلكتروشوب (ElectroShop) هو تطبيق ويب للتجارة الإلكترونية تم تصميمه وتطويره بالكامل باستخدام تقنيات الويب الحديثة مثل Vanilla JavaScript وHTML5 وCSS3 دون الاعتماد على مكتبات خارجية ثقيلة، مما يضمن أداءً سريعًا وتجربة مستخدم سلسة.
يتميز المشروع ببنية برمجية معيارية تعتمد على ES6 Modules، وتصميم عصري يدعم الوضع الليلي بشكل كامل، مع نظام إدارة حالة متطور للتعامل مع سلة التسوق والمفضلة في الوقت الفعلي.
المميزات الرئيسية
1. تصميم عصري وتجربة مستخدم متطورة (UI/UX)
تصميم متجاوب: يعمل بكفاءة على جميع الأجهزة مثل الموبايل والتابلت وأجهزة الكمبيوتر.
الوضع الليلي: إمكانية التبديل بين الوضع النهاري والليلي مع حفظ تفضيلات المستخدم.
التأثيرات البصرية: استخدام Glassmorphism وتدرجات لونية وحركات سلسة لعناصر الواجهة.
إشعارات تفاعلية: نظام تنبيهات حديث بدلًا من النوافذ المنبثقة التقليدية.
2. خصائص التسوق
تصفح المنتجات: عرض المنتجات ضمن شبكة عصرية مع صور عالية الجودة.
نظام الفلترة والبحث:
فلترة المنتجات حسب الفئات مثل اللابتوبات والهواتف والصوتيات.
بحث فوري عن المنتجات.
فرز المنتجات حسب السعر أو الاسم.
سلة تسوق ذكية: إضافة وحذف المنتجات وتعديل الكميات مع حساب الإجمالي تلقائيًا.
قائمة المفضلة: حفظ المنتجات للرجوع إليها لاحقًا.
عدادات تفاعلية: تحديث فوري لعدد العناصر في السلة والمفضلة داخل شريط التنقل.
3. الجانب التقني والهيكلية
JavaScript معياري: تقسيم الكود إلى وحدات برمجية مستقلة لسهولة الصيانة والتطوير.
إدارة الحالة: نظام مركزي لإدارة الحالة يعتمد على نمط النشر والاشتراك لمزامنة البيانات.
التخزين المحلي: حفظ بيانات السلة والمفضلة وتفضيلات المستخدم محليًا لمنع فقدانها.
متغيرات CSS: استخدام متغيرات CSS لبناء نظام تصميم مرن وسهل التعديل.
التقنيات المستخدمة
HTML5: لبناء هيكل الصفحات وفق معايير تحسين محركات البحث.
CSS3: تنسيق الواجهات باستخدام Flexbox وGrid مع تنظيم الملفات بشكل معياري.
JavaScript ES6+: لغة البرمجة الأساسية مع استخدام الوحدات البرمجية والكلاسات.
LocalStorage API: لتخزين بيانات المستخدم محليًا.
