لقد قمت بتطوير منصة تجارة إلكترونية شاملة لشركة "نسمة هايدراميست" (Nasma Hydramist)، وهي شركة متخصصة في مزيلات العرق ومنتجات العناية الشخصية. تم تصميم المنصة لتسهيل اكتشاف المنتجات وتزويد العملاء بتجربة تسوق سلسة. التحدي: كان العميل بحاجة إلى حضور احترافي عبر الإنترنت يستعرض خط إنتاجهم بشكل فعال، مع تزويد العملاء بمعلومات مفصلة ووصول سهل لخيارات الشراء. كما تطلب المشروع نظاماً لإدارة المحتوى بشكل مستقل دون الحاجة لاعتماد دائم على الدعم التقني. الحل: اكتشاف متقدم للمنتجات: بناء نظام تصفح بديهي مع قدرات تصفية (Filtering) وبحث قوية، مما يتيح للعملاء العثور بسرعة على المنتجات التي تناسب احتياجاتهم وتفضيلاتهم. دعم لغات متعددة: تنفيذ نظام تدويل (Internationalization) كامل يدعم ثلاث لغات، مما ساهم في توسيع انتشار العلامة التجارية ووصولها لشرائح عملاء متنوعة. معلومات شاملة عن المنتجات: توفر كل صفحة منتج تفاصيل كاملة، ومواصفات، وروابط شراء مباشرة، لضمان حصول العملاء على كافة المعلومات لاتخاذ قرارات مدروسة. إدارة ديناميكية للمحتوى: تطوير لوحة تحكم إدارية مخصصة مدعومة بـ Firebase، مما مكن فريق "نسمة" من إدارة المنتجات، والكتالوجات، وتحديثات المحتوى في الوقت الفعلي دون مساعدة تقنية. نظام الكتالوج: تنظيم المنتجات في كتالوجات مهيكلة لتحسين التنقل وتصنيف المنتجات، مما يعزز تجربة المستخدم الإجمالية. واجهة وتجربة مستخدم عصرية: الاعتماد على مكونات Shadcn UI و Tailwind CSS لإنشاء واجهة نظيفة وحديثة تعكس المكانة المرموقة للعلامة التجارية، مع ضمان سرعة التحميل وسلاسة التفاعلات.

خلال فترة تدريبي في شركة "Speed of Light"، كُلِّفت بتطوير صفحة هبوط (Landing Page) ثابتة لتطبيق mudir.app بناءً على نموذج تصميم مُعد مسبقاً. تطلب المشروع بناء واجهة مستخدم نظيفة ومتجاوبة تماماً باستخدام HTML و Tailwind CSS. التحدي: تضمن التصميم أقساماً ذات منحنيات معقدة في منطقتي الـ "Hero" والـ "Footer"، مما فرض تحديات تقنية مثيرة للاهتمام. في البداية، حاولت تحقيق التجاوب (Responsiveness) باستخدام طرق CSS التقليدية، لكن هذه الوسائل تبين أنها مرهقة ويصعب صيانتها عبر أحجام الشاشات المختلفة. الحل والخبرة المكتسبة: بتوجيه من المشرف الخاص بي، استكشفت وطبقت تقنيات متقدمة في CSS و Tailwind CSS مكنتني من إنشاء تصميم متجاوب بالكامل دون الاعتماد على استعلامات الوسائط (Media Queries) المعقدة. نتج عن هذا النهج كود أكثر نظافة وسهولة في الصيانة، مع تحقيق دقة مثالية (Pixel-perfect) في التجاوب عبر جميع الأجهزة. الدروس المستفادة: عزز هذا المشروع بشكل كبير قدرتي على تحويل نماذج التصميم إلى كود نظيف ومنظم. كما أكد على أهمية البحث عن حلول احترافية وفعالة بدلاً من الاستقرار على أول حل يعمل فحسب. علمتني هذه التجربة دروساً قيمة حول بنية CSS الحديثة وقوة إطارات العمل القائمة على الأدوات المساعدة (Utility-first) مثل Tailwind CSS.