قمت بتطوير وبناء منصة متكاملة (Full-Stack) مخصصة لمعاهد تحفيظ القرآن الكريم، تهدف إلى إدارة المنظومة التعليمية بالكامل من خلال ثلاث لوحات تحكم متخصصة: (المدير، المعلم، الطالب). المشروع يعمل حالياً كنسخة تجريبية حية على خادمي الخاص. أبرز المهام والميزات التي قمت بتطويرها: نظام الطلاب الذكي: فرز وتوزيع تلقائي للطلاب على الفصول الدراسية (بفصل تلقائي للذكور والإناث). يحتوي حساب الطالب على جدول أسبوعي، وأرشيف للدروس (مرئية وصوتية)، ونظام تفاعلي للمناقشات المحددة بوقت. نظام اختبارات متقدم ومضاد للغش (Anti-Cheat): صممت بيئة اختبارات صارمة تتضمن: منع الوصول إلى فحص العنصر (Inspect Element)، حفظ تلقائي لحظي للإجابات، منع الطالب من مغادرة صفحة الاختبار (إجبار على العودة في حال الخروج أو انقطاع الإنترنت)، وتسليم تلقائي بمجرد انتهاء الوقت. أدوات المعلم والتحليلات: إمكانية إدارة الحضور والغياب، وجدولة أو تأجيل الدروس. بالإضافة لنظام تصحيح هجين للاختبارات (تصحيح تلقائي للأسئلة الموضوعية بضغطة زر، وتصحيح يدوي للمقالية)، مع توفير لوحة تحليلات دقيقة لمستوى كل طالب. معالجة متقدمة للبيانات والصور: برمجة خوارزمية لإنشاء معرّف مستخدم (ID) مخصص بصيغة: [role][year][gender][birth_day][sequence]. كما طورت نظاماً لرفع الصور (بحد أقصى 5MB) يقوم بقص الصورة وتحويلها تلقائياً إلى صيغة WebP لتوفير مساحة التخزين وتريع التحميل. هندسة الأداء والأمان: بناء أجزاء كبيرة من الموقع باستخدام (Server Components) لضمان أداء فائق السرعة، مع استخدام واجهات تحميل (Skeleton Loading). كما قمت بتأمين الموقع بترويسات أمان (Security Headers) قوية مع JS Nonce. بيانات الدخول للتجربة : المعلم: t12345678 الطالب: s12345678 المدير: a12345678 كلمة المرور للجميع: 12345678

موقع ويب متعدد اللغات (Hawari) - الترحيل إلى Next.js وتحسين محركات البحث قمت بالعمل على قالب (Template) مبني مسبقاً بـ React، وتخصيصه بالكامل ليحتوي على صفحتين رئيسيتين (الرئيسية، ومن نحن). لضمان أقصى استفادة من قدرات تحسين محركات البحث (SEO) والأداء العالي، قمت بترحيل (Migration) المشروع بالكامل إلى بيئة Next.js. أبرز المهام والميزات التي قمت بتطويرها: الترحيل إلى Next.js: نقل الكود وتحديث بنية المشروع للاستفادة من ميزات Next.js الحديثة، مما يوفر سرعة تحميل فائقة وأداءً ممتازاً. تحسين متقدم لمحركات البحث (Advanced SEO): إعداد شامل لملفات sitemap.xml و robots.txt و manifest، بالإضافة إلى تحسينات هيكلية لزيادة الظهور العضوي على محركات البحث. أمان عالي (Security Headers): تطبيق سياسات أمان صارمة من خلال إعداد وتخصيص ترويسات الأمان (HTTP Security Headers) لحماية الموقع من الثغرات الشائعة. دعم 4 لغات مختلفة: بناء نظام تدويل (Internationalization) متكامل باستخدام next-intl لخدمة جمهور متنوع بأربع لغات مختلفة بسلاسة تامة

قمت بتطوير منصة ويب شاملة لشركة "Sezerchina"، وهي شركة متخصصة في توزيع المنتجات الكهربائية لتجار التجزئة والتجار. التحدي: واجهت "Sezerchina" تحديات تشغيلية كبيرة في إدارة طلبات العملاء. كانت الشركة تعتمد على إرسال واستقبال ملفات متعددة، مما خلق عملية فوضوية ومربكة لكل من الشركة وعملائها. كان سير العمل اليدوي هذا غير فعال، ويستغرق وقتاً طويلاً، ويعيق القدرة على التوسع والنمو. الحل: قمت ببناء منصة ويب احترافية أحدثت تحولاً جذرياً في عملية الطلبات بأكملها من خلال: نظام متقدم لتصفح المنتجات: يمكن للتجار الآن البحث عن المنتجات وتصفحها بسهولة عبر فئات، وكتالوجات، وفلاتر للعلامات التجارية، مما يجعل اكتشاف المنتجات عملية سلسة وفعالة. تجربة مستخدم محسنة (UX): تم تصميم المنصة بنهج يضع المستخدم في المقام الأول، لتزويد التجار بكافة المعلومات الأساسية في متناول أيديهم - بدءاً من التفاصيل الدقيقة للخدمات وحتى معلومات التواصل - لضمان تجربة احترافية وسلسة. إدارة ديناميكية للمحتوى: بالاعتماد على Strapi كنظام إدارة محتوى منفصل (Headless CMS)، قمت بتطوير لوحة تحكم إدارية قوية تمكن فريق Sezerchina من إضافة وتحديث وإدارة المنتجات، والفئات، والكتالوجات بسهولة دون الحاجة لتدخل تقني. أداء عالٍ وتحسين احترافي لمحركات البحث (SEO): تم بناء المنصة باستخدام Next.js لضمان سرعة تحميل فائقة وأداء مثالي. طبقت أفضل ممارسات الـ SEO مع دعم كامل للغتين (العربية والإنجليزية)، مما أدى إلى تحسين ظهور المنصة على محركات البحث والوصول العضوي بشكل كبير. الأثر: حوّل هذا المشروع عملية استيراد معقدة ويدوية إلى تجربة رقمية مبسطة. حسّنت المنصة الكفاءة التشغيلية لشركة Sezerchina، وقللت من الأعباء الإدارية، ورفعت من مستوى رضا العملاء من خلال تزويد التجار بنظام طلبات حديث واحترافي.

في أحد الأيام، عملت مع اثنين من أصدقائي على تطوير منصة ويب متكاملة. نظراً لحقوق الطبع والنشر والسرية، لا يمكنني مشاركة تفاصيل دقيقة، وسأكتفي بعرض صورة أو صورتين آمنتين لا تؤثران على خصوصية الموقع أو أصحابه. أبرز المهام والميزات التي قمت بتطويرها: نظام الصلاحيات (Role-Based Access): قمت بتطوير النظام ليدعم 3 أنواع من المستخدمين: المدير (بصلاحيات كاملة)، منشئ الصور، والمستخدم العادي، مع تخصيص الواجهات والعمليات لكل دور. محرر صور متقدم: باستخدام مكتبة Konva، صممت أداة تفاعلية تتيح للمستخدمين التعديل على صورهم (تكبير، تصغير، إضافة وتلوين النصوص) وتصدير الصورة النهائية لتحميلها بجودة عالية. محرك بحث ذكي: طورت نظام بحث تقريبي (Fuzzy Search) يدعم البحث المخصص؛ حيث يمكن استخدام الرمز @ للبحث عن المستخدمين، والرمز # للبحث عن منتجات تحتوي على "هاشتاغ" معين. إدارة مساحات التخزين: عملت في البداية على ربط المشروع بخدمة Amazon S3 لتخزين الملفات، ولاحقاً قمت بتنفيذ عملية ترحيل (Migration) ناجحة لخدمة تخزين أخرى لتلبية متطلبات المشروع بشكل أفضل.

لقد قمت بتطوير منصة تجارة إلكترونية شاملة لشركة "نسمة هايدراميست" (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.