إنشاء، اختبار، تحسين

تطوير كامل لمنصة الويب الخاصة بالشركة لشركة GM Microcementos، وهي شركة متخصصة في تطبيقات الأسمنت الدقيق. موقع إلكتروني احترافي يحتوي على 15 صفحة مُحسَّنة، مع التركيز على الأداء وتحسين محركات البحث وتجربة مستخدم استثنائية. يتضمن حاسبة الميزانية ومعرض مشاريع قابل للتصفية ونماذج متقدمة ونظام تصميم بسيط. بنية معيارية مع أكثر من 100 مكوّن قابل لإعادة الاستخدام ومحسّن لـ Core Web Vitals.

منصة ويب لأكاديمية CEJ، الأكاديمية المتخصصة في امتحانات الخدمة المدنية في ملقة. موقع إلكتروني متجاوب بالكامل مع مدونة، وحرم جامعي افتراضي، واختبار معرفي، ونظام تسجيل وإدارة الدورات. تم تطويره باستخدام Next.js 14 و React 18 و Tailwind CSS و Framer Motion و Docker.

تم تطوير موقع شركة Dimap، وهو تطبيق حديث يعتمد على Next.js 15 و React 19 و Redux Toolkit و TailwindCSS، ويركز على تقديم الأداء الأمثل وتجربة سلسة. يتضمن المشروع صفحات الخدمة والمدونة وأقسام الشركة ونماذج تتبع العملاء المحتملين، وكلها مبنية على بنية معيارية وتحميل محسّن للغاية باستخدام SSG وLazy Loading و ClientLoader.

DevCrate عبارة عن منصة لاكتشاف موارد التطوير (الأدوات والمكتبات والأصول والوثائق والتحديات). ألم يسبق لك أن احتجت إلى مورد لمشروعك، أو مجرد بعض الإلهام، وانتهى بك الأمر بتصفح عدد لا يحصى من الصفحات؟ لهذا السبب أنشأت هذه المنصة: لتنظيم وعدم فقدان أي من الموارد التي اكتشفتها على مر السنين، وللتمكن من العثور عليها بسرعة دون الاعتماد على الإشارات المرجعية المبعثرة. وهي تتضمن بحثًا متقدمًا وفلاتر للعلامات ومنطقة إدارة لإدارة كل المحتوى. كما يسمح باقتراحات من المجتمع لمواصلة جمع الأدوات المفيدة. تم تصميمه باستخدام Next.js و React و TypeScript و MongoDB، مع مصادقة آمنة وواجهة حديثة تعتمد على shadcn/ui.

Cmd+kit هو نظام لوحة أوامر قابل لإعادة الاستخدام لمنتجات الويب، مصمم لتوفير بحث سريع وتصفح بلوحة المفاتيح وتنفيذ الإجراءات من واجهة متسقة وسهلة الاستخدام. وهي مصممة للاندماج بسهولة في حزم مختلفة مع محولات رسمية لـ React و Vue و Preact و Astro، مع الحفاظ على نفس قاعدة السلوك والتخصيص المرئي. يتضمن وثائق كاملة وملعبًا تفاعليًا لتكوين القوالب وهيكل الأوامر وتصدير الشيفرة الجاهزة للاستخدام. يمكن تثبيته باستخدام npm أو pnpm أو yarn أو bun اعتمادًا على تدفق كل مشروع.

مجموعة أدوات CLI + مكتبة منشورة في npm تسمح بتعريف عقود واجهة برمجة التطبيقات في ملف JSON مكتوب واحد وإنشاء أنواع TypeScript مشتركة تلقائيًا، وعميل Angular، والتحقق من صحة وقت التشغيل باستخدام Zod ووحدات تحكم لـ NestJS. يزيل المزامنة غير المتزامنة بين الواجهة الأمامية والخلفية، ويتجنب تكرار الشيفرة البرمجية ويكتشف التغييرات التي تحدث من خلال لقطات العقود. يتضمن توليد نماذج وهمية للاختبار وبنية معيارية تعتمد على حزم متعددة قابلة لإعادة الاستخدام.

إعادة إنشاء قسم البطل الرسمي من موقع Apple لـ AirPods Pro 2، مع التركيز على إتقان الرسوم المتقدمة باستخدام GSAP وScrollTrigger. قمت بتنفيذ تسلسل من 65 صورة يتم عرضها عبر Canvas ومتزامنة مع التمرير، إضافةً إلى انتقالات سلسة وملاحة ديناميكية وتأثيرات مستوحاة من تجربة Apple الأصلية. مشروع يهدف إلى تحسين مهاراتي في الرسوميات عالية الأداء على الويب.

تطوير تطبيق PWA لاكتشاف الكائنات في الوقت الفعلي باستخدام Angular 19 وTensorFlow.js. يتضمن إعداد PWA، دمج TensorFlow.js لاكتشاف الكائنات، التقاط ومعالجة الصور المباشرة، تحسين الأداء باستخدام Web Workers وLazy Loading، التخزين دون اتصال عبر IndexedDB، ونشره على الأجهزة المحمولة.

مشروع تدريبي لتعلم Three.js و TresJS باستخدام نماذج ثلاثية الأبعاد. تطبيق ويب تفاعلي يسمح بتخصيص مكتب واقف (standing desk) بخيارات تشطيب وألوان مختلفة. يتضمن عرض ثلاثي الأبعاد مع عناصر تحكم مدارية، ونماذج ثلاثية الأبعاد للاب توب وسماعات الرأس ونبات زخرفي. خصص إنهاء المكتب واختر الألوان للإكسسوارات مع معاينة في الوقت الفعلي. تم تطويره باستخدام Vue 3، TresJS (تكامل Three.js مع Vue)، TypeScript، Vite و UnoCSS.

نسخة من صفحة الهبوط Grand Theft Auto VI، تم إنشاؤها حصرًا لأغراض تعليمية وعرض مهارات تطوير الويب. موقع ويب حديث بتصميم متجاوب محسَّن لجميع دقة شاشات سطح المكتب (1024px - 4K). يتضمن قائمة منسدلة مع رسوم متحركة متقدمة باستخدام GSAP، ونظام عرض ديناميكي للشخصيات والمواقع مع الصور، وقسم تفاعلي للإعلانات الترويجية مع معاينة، وقسم تنزيلات مع بطاقات متحركة. مشروع تعليمي غير ربحي، تم تطويره باستخدام Astroو Tailwind CSS وJavaScript.

مشروع صغير موجّه للتدرّب على استخدام Strapi كـ CMS وواجهة خلفية. تم تطويره باستخدام React/Next.js وTypeScript وTailwind CSS. رغم أن العرض التجريبي يستخدم بيانات وهمية، فإن الكود يتضمن تكاملاً حقيقياً مع Strapi لجلب المحتوى وإدارته.

مشروع دردشة فوري ببنية خلفية موجهة للإنتاج. يستخدم Node.js + Express و Socket.IO لاتصال ثنائي الاتجاه، مع وضعي تخزين: داخل الذاكرة (mock) وتخزين دائم اختياري عبر Supabase. يمكن تشغيل الواجهة الأمامية (Vite) بوضع demo أو live، والحل مبني بطبقات (configuration و HTTP و realtime و domain و storage) لتسهيل الصيانة والاختبار وقابلية التوسع.

تطبيق HTML5 للعبة Super Mario Bros الكلاسيكية المبنية باستخدام Phaser 3.55.2 للأغراض التعليمية، استنادًا إلى عمل decapapi. يعيد المشروع إنشاء تجربة منصة ثنائية الأبعاد باستخدام بنية معيارية للرسوم المتحركة والكتل والهياكل والكيانات وعناصر التحكم في المشغل وشاشة HUD، بالإضافة إلى الإضافات مثل التقاط لقطة الشاشة باستخدام html2canvas. وهو يدعم نشر الويب والتطوير المحلي باستخدام Vite، مما يجعل الاختبار والمساهمات مفتوحة المصدر بموجب ترخيص MIT أمرًا مباشرًا.

يعيد Paint Win 95' إنشاء تجربة Microsoft Paint الكلاسيكية بواجهة رجعية بأسلوب Windows 95 وسلوك ويب حديث. يتضمن أدوات للرسم والتحديد، ولوحة ألوان أساسية/ثانوية، وسجل تراجع/إعادة، ومستويات تكبير للعمل، وفتح الصور المحلية، والتصدير إلى PNG، ودعم إدخال الماوس ولوحة المفاتيح واللمس/القلم عبر Pointer Events.

Bookshop View Transitions هو عرض توضيحي مبني بـ React + Vite يركز على تنفيذ انتقالات سلسة بين الصفحات باستخدام واجهة View Transitions API، ويتضمن رسومًا متحركة مشتركة بين العناصر (العنوان، الغلاف، والتنقل) لتحقيق تنقل بصري متواصل.

نسخة TikTok مبنية باستخدام React وTypeScript وVite ومصممة بنهج mobile-first. تتضمن موجزًا عموديًا مع تشغيل تلقائي، وتنقل Following/For You، وإجراءات تفاعلية (إعجاب، تعليقات، حفظ، مشاركة)، وصفحات Friends/Inbox/Profile، وميزة upload مع النشر في الموجز. تعمل بهيكلية معتمدة على الخدمات (mock افتراضي مع تخزين دائم عبر localStorage) مع تجهيز Supabase للاتصال الخلفي الحقيقي.

مشروع مفتوح المصدر مستوحى من اللعبة الكلاسيكية Breakout، مبني باستخدام Astro ومنطق لعبة بـ TypeScript عبر Canvas. يتضمن اختيار مستوى الصعوبة داخل الـ canvas، سرعة كرة قابلة للتعديل وتتزايد تدريجيًا، طوبًا بقدرة تحمّل متغيرة مع حالات تلف مرئية، تحكمًا بلوحة المفاتيح، وإعادة تشغيل بعد Game Over.

عملت في هذا المشروع مع فريق لتطوير منصة ملتزمة ببيع المنتجات عالية الجودة والتجارة المحلية من الصفر. عملنا من الصفر مع المفهوم إلى الممارسة العملية لإنشاء كل من الواجهة الخلفية والواجهة الأمامية. وبصرف النظر عن التقنيات المختلفة، قمنا بدمج عمليات التكامل مثل jwt للتحكم في حسابات المستخدمين وتسجيل الدخول، ولوحة تحكم للتحكم في جميع البيانات... وظائف مثل القدرة على تسجيل الدخول باستخدام شبكات التواصل الاجتماعي المختلفة، وإنشاء حساب كمستخدم لشراء المنتجات أو كشركة لإضافتها، وخرائط لأقرب مكان يمكن العثور فيه على المنتج المعني، من بين أشياء أخرى. لأسباب تتعلق بالسرية لم يتم عرض الرمز البرمجي.