موقع تفاعلي متخصص في الأزياء - AURA

1. نبذة عن المشروع: تطبيق ويب لمتجر إلكتروني تفاعلي متخصص في الأزياء (Fashion E-commerce)، يعتمد على تقنيات الواجهة الأمامية البحتة (Vanilla JavaScript) دون استخدام مكتبات خارجية لإدارة الحالة. يحاكي التطبيق تجربة تسوق كاملة بدءاً من تصفح المنتجات القادمة من خادم خارجي (API)، مروراً بعمليات البحث والفلترة، وصولاً إلى إدارة سلة التسوق وحفظ البيانات محلياً. 2. أهم المميزات (Key Features): جلب البيانات ديناميكياً (Dynamic Data Fetching): الاتصال بـ FakeStoreAPI لجلب بيانات المنتجات وعرضها بشكل غير متزامن (Asynchronous). نظام البحث والفلترة (Advanced Search & Filter): إمكانية البحث عن المنتجات بالاسم في الوقت الفعلي. فلترة المنتجات حسب الفئات (عرض الأزياء فقط واستبعاد الإلكترونيات). إدارة سلة التسوق (Smart Cart System): إضافة منتجات للسلة مع منع التكرار (زيادة الكمية تلقائياً). تعديل الكميات وحساب الإجمالي الفرعي والكلي ديناميكياً. حذف المنتجات وتحديث أيقونة السلة (Badge) فورياً. حفظ البيانات (Data Persistence): استخدام LocalStorage لحفظ محتويات السلة، مما يضمن بقاء المنتجات المختارة حتى بعد إغلاق المتصفح أو تحديث الصفحة. تجربة المستخدم (UX Enhancements): عرض "هيكل تحميل" (Skeleton Loading) أثناء انتظار البيانات، ورسائل تنبيهية عند خلو السلة أو نتائج البحث. 3. التقنيات المستخدمة (Tech Stack): HTML5 & CSS3: لبناء الهيكل وتنسيق البطاقات والجداول (Grid/Flexbox). JavaScript (ES5/ES6): AJAX (XMLHttpRequest): للتعامل مع الـ API (يمكنك ذكر Fetch API إذا كنت تخطط لتحديث الكود مستقبلاً، لكن الكود الحالي يستخدم XHR). DOM Manipulation: إنشاء وعرض عناصر HTML ديناميكياً بناءً على البيانات. JSON Handling: معالجة البيانات القادمة من السيرفر والمخزنة محلياً. Local Storage API: لإدارة حالة التطبيق (State Management) بجانب العميل. 4. التحديات والحلول (Challenges & Solutions): تحدي: الحفاظ على بيانات السلة عند التنقل بين الصفحات. الحل: بناء منطق (Logic) يعتمد على القراءة والكتابة المستمرة في LocalStorage عند أي إجراء (إضافة/حذف). تحدي: التعامل مع تأخير استجابة الـ API. الحل: تصميم نظام Skeleton Loader لإشعار المستخدم بأن البيانات قيد التحميل، مما يحسن تجربة المستخدم.