"A to Z Store" هو منصة تجارة إلكترونية حديثة ومكتملة الأركان، مصممة خصيصاً لبيع الأزياء العصرية للرجال، النساء، والأطفال. تم بناء المشروع ليكون تطبيق ويب تقدمي (PWA)، مما يمنح المستخدمين تجربة سريعة وسلسة تشبه التطبيقات الأصلية (Native Apps) دون الحاجة للتحميل من متاجر التطبيقات.
⚙️ التحدي الهندسي والحل:
كان التحدي الأساسي هو بناء نظام مرن يتيح لإدارة المتجر التحكم الكامل في الكتالوج المعقد للملابس (تعدد الألوان، المقاسات، الفئات، وحالة المخزون) مع توفير واجهة تسوق سريعة وموثوقة للعميل. لحل ذلك، قمت بتطوير معمارية نظيفة تعتمد على الـ React Hooks لفصل المنطق البرمجي عن واجهة المستخدم، مع ربط النظام بقاعدة بيانات Supabase لضمان مزامنة البيانات والطلبات لحظياً.
🚀 المميزات التقنية التي تم تنفيذها:
1. تطبيق ويب تقدمي (PWA):
• دعم التثبيت المباشر على هواتف المستخدمين وحواسيبهم.
• أداء فائق وسرعة في تحميل الصور والبيانات بفضل استراتيجيات الـ Caching المتطورة (Service Workers).
2. لوحة تحكم الإدارة (Admin Dashboard):
• إدارة المنتجات: واجهة متقدمة لإضافة المنتجات وتحديد الفئات (الرئيسية والفرعية) ، مع إمكانية إضافة الخصومات، خيارات الشحن المجاني، واستخدام محرر نصوص (Rich Text) لوصف المنتج باحترافية.
• إدارة الطلبات: نظام متكامل لتتبع طلبات العملاء وتحديث حالاتها (مُلغى، مُنفذ، إلخ) مع عرض تفاصيل الفواتير والمبالغ.
• نظام الشحن الديناميكي: وحدة خاصة لإدارة أسعار الشحن وتخصيصها بناءً على كل محافظة مصرية بشكل مستقل (مثال: القاهرة 50 جنيه، الإسكندرية 20 جنيه).
• إدارة المتغيرات: التحكم في الفئات الرئيسية والفرعية، وإضافة أو حذف الألوان المتاحة للمنتجات بسهولة.
3. تجربة العميل (User Experience):
• واجهة مستخدم (UI) عصرية ومتجاوبة بالكامل (Mobile-First) تدعم تصفح أقسام المتجر المختلفة (أطفال، نساء، رجال).
• نظام سلة مشتريات ذكي ومفضلة (Wishlist) لحفظ المنتجات مثل "ترنج أولادي" وغيرها للرجوع إليها لاحقاً.
• صفحة خاصة بالعميل لمتابعة "طلباتي" السابقة وتحديث معلومات الاتصال.
• خيارات دفع مخصصة ومحلية (تتضمن فودافون كاش).
💻 التقنيات المستخدمة:
• واجهة المستخدم (Frontend): React.js, Context API, Custom Hooks, CSS Modules
• البنية التحتية وقاعدة البيانات (Backend & DB): Supabase (PostgreSQL), Supabase Storage (لرفع الصور)
• المميزات الإضافية: PWA (Service Workers, Web App Manifest)
• النشر والاستضافة: Netlify
