برمجة وتطوير متجر إلكتروني ديناميكي ذكي (متجر خُطى)
تفاصيل العمل
قمت بتصميم وتطوير واجهة متجر إلكتروني متكامل (Single Page Application) مخصص لبيع الأحذية، يهدف إلى تقديم تجربة تسوق سلسة وسريعة للمستخدم (UX)، مع واجهة بصرية (UI) عصرية وجذابة تدعم اللغة العربية (RTL) بشكل مثالي. التميز التقني في هذا المشروع يكمن في الاعتماد الكامل على تقنيات الواجهات الأمامية (Front-End) لإنشاء متجر ديناميكي بالكامل لا يتطلب لوحة تحكم خلفية معقدة أو خوادم مكلفة؛ حيث تم بناء نظام يقرأ بيانات المنتجات مباشرة من ملف "Excel"، مما يجعله حلاً عملياً واقتصادياً جداً لأصحاب المشاريع الناشئة والأنشطة التجارية الصغيرة. أهم ما تم تنفيذه في المشروع: - قاعدة بيانات مرنة (Excel to HTML): دمج مكتبة (SheetJS) برمجياً لقراءة وتحليل بيانات المنتجات (الصور، الأسماء، الأسعار، المقاسات، والموديلات) من ملف .xlsx وعرضها تلقائياً داخل الموقع باستخدام JavaScript. - نظام فلترة وتصنيف لحظي: برمجة نظام تصفية متقدم يتيح للزائر فرز المنتجات (رجالي، نسائي، شبابي، أطفالي، إلخ) بسرعة فائقة وبدون إعادة تحميل الصفحة. - نظام الطلب المباشر عبر واتساب: ابتكار نظام طلب ذكي يلتقط خيارات العميل (نوع المنتج والمقاس المحدد) ويقوم بتوليد رسالة نصية مجهزة تلقائياً لتحويل العميل مباشرة إلى تطبيق "واتساب" لإتمام عملية الشراء بنقرة واحدة. - معرض صور تفاعلي (Image Modal/Zoom): برمجة نافذة منبثقة تفاعلية تتيح للمستخدم تكبير صور المنتجات لرؤية أدق التفاصيل، مع دعم الإغلاق عبر لوحة المفاتيح (Escape) لضمان أفضل تجربة استخدام. - تصميم متجاوب (Mobile-First Design): استخدام أنظمة (CSS Grid & Flexbox) لضمان توافقية الموقع مع جميع الشاشات. تم تخصيص عناصر محددة للهواتف المحمولة مثل "شريط التواصل السفلي الثابت" لتسهيل وصول العميل لحسابات المتجر. - كود نظيف وقابل للتطوير (Clean Code): هندسة ملفات الستايل باستخدام متغيرات (CSS Variables) لسهولة تعديل الهوية البصرية (الألوان والخطوط) في أي وقت، مع الاهتمام بسرعة تحميل الصفحة وأدائها. التقنيات المستخدمة في العمل: - HTML5 / CSS3 - Vanilla JavaScript (ES6+) - SheetJS (XLSX Library) - FontAwesome & Google Fonts (Cairo) متجر إلكتروني خفيف، سريع التحميل، وتفاعلي، يتيح لصاحب العمل إضافة وتعديل منتجاته بسهولة تامة عبر تعديل ملف إكسل بسيط، ويوفر للعميل رحلة تسوق مريحة تنتهي بطلب مباشر وسهل.
مهارات العمل
بطاقة العمل
طلب عمل مماثل
