نظرة عامة على المشروع
تبني HOLME Engineering برامج حيوية للسفن البحرية المستقلة وأنظمة الطاقة البحرية ومنصات الأتمتة الصناعية. جمهورها — صانعو القرار في أحواض بناء السفن وشركات الطاقة والمقاولين الدفاعيين — يقيّم الشركاء التقنيين من خلال حضورهم الرقمي، لذا احتاجت الشركة منصة ويب تعكس الدقة نفسها التي تميّز هندستها.
سلّمتُ المنصة كنظام متكامل: واجهة أمامية عالية الأداء بـ Next.js 16 مقترنة بنظام إدارة محتوى بدون رأس (Headless CMS) جاهز للإنتاج مبني بـ Laravel. يدير المسؤولون كل صفحة وخبر ومنشور علمي ومشترك وحملة بريدية عبر REST API مركزي — دون أي تعديل على الواجهة الأمامية أو إعادة نشر.
كل تفصيلة، من أوقات التحميل دون الثانية إلى رسوم التحميل القائمة على الفيزياء، تعزّز رسالة واحدة: الدقة الهندسية.
الميزات الرئيسية
- منشئ صفحات ديناميكي — نظام CMS مدفوع بالمخططات مع 39 نوعاً من الأقسام ونصوص قابلة للتنسيق وترتيب مرن للمحتوى
- إدارة الأخبار — دورة حياة كاملة للمقالات (مسودة ← منشور ← مؤرشف) مع تصفية وتصنيفات وإشعارات بريدية
- المنشورات العلمية — إدارة المنشورات الأكاديمية والبحثية مع التحقق من DOI والوصول عبر الروابط الوصفية
- نظام النشرة البريدية — اشتراكات، إلغاء اشتراك برموز آمنة، معالجة الارتدادات، تصدير CSV، وحملات بريدية جماعية
- مسارات التواصل — نموذج اتصال عام مع إدارة الرسائل من لوحة التحكم وإشعارات بريدية
- إدارة قائمة على الأدوار — تسجيل بالدعوة فقط مع دورين منفصلين: مشرف ومسؤول وسائط اجتماعية
- لوحة تحليلات — مقاييس واتجاهات وأحدث المقالات والاستفسارات، مدعومة بسجل تدقيق كامل
أبرز الجوانب التقنية
- بنية تُعطي الأولوية للخادم — React Server Components كإعداد افتراضي؛ حدود العميل فقط حيث يلزم التفاعل
- محتوى مُحرَّك بالإعدادات — بيانات الصفحات في ملفات إعداد، ما يتيح تكراراً سريعاً دون لمس كود المكونات
- مُحمِّل قائم على الفيزياء — مشهد SVG للمحيط يقود فيه نظام spring-damper طفوَ السفينة وميلَها، مرتبطاً بتقدم التحميل الفعلي
- تنسيق التمرير — تمرير سلس بـ Lenis مع GSAP ScrollTrigger لكشوف سينمائية للأقسام
- رسوم متحركة آمنة على الأداء — جميع الحركات تستخدم transform وopacity فقط؛ بدون أي إعادة تخطيط
- تخزين مؤقت بـ Redis — استجابات CMS المدفوعة بالمخططات مخزّنة مؤقتاً لقراءات عامة سريعة
- تسليم مُحصَّن — مصادقة برموز Sanctum، رؤوس أمان صارمة، وبريد إلكتروني عبر طوابير Postmark
- تغطية اختبارية عميقة — 1,333 اختباراً بـ Pest تغطي جميع الوحدات، إضافة إلى اختبارات Playwright الشاملة مع تدقيقات إتاحة بـ axe-core
مساهماتي
- صممتُ وبنيتُ منصة الواجهة الأمامية كاملة بـ Next.js 16 وReact 19 وTypeScript صارم
- هندستُ ونفّذتُ نظام CMS بدون رأس بـ Laravel، بما يشمل منشئ الصفحات بـ 39 قسماً مع تخزين Redis المؤقت
- بنيتُ البنية البريدية: تكامل Postmark، طوابير Redis، معالجة الارتدادات، وإرسال الحملات
- نفّذتُ المصادقة والتفويض: رموز Sanctum، تسجيل بالدعوة فقط، فصل الأدوار، وسجل التدقيق
- كتبتُ مجموعات الاختبار الآلية — 1,333 اختباراً للخلفية (Pest)، اختبارات وحدات (Vitest)، واختبارات شاملة وإتاحة (Playwright وaxe-core)
- جهّزتُ البنية التحتية: Docker Compose للتطوير، وNginx + Supervisor للإنتاج، وخط النشر
التحديات والحلول
التحدي: احتاج الموقع تغييرات محتوى متكررة — صفحات وأقسام وأخبار وحملات جديدة — دون الحاجة لمطوّر أو إعادة نشر للواجهة الأمامية.
الحل: نظام CMS بدون رأس مدفوع بالمخططات مع 39 نوعاً من الأقسام القابلة للتركيب، مكشوف عبر REST API مُدار بالإصدارات ومخزّن مؤقتاً بـ Redis. تعرض الواجهة الأمامية أي بنية تعيدها الـ API.
النتيجة: يدير المسؤولون الصفحات والأخبار والمنشورات والمشتركين والحملات بالكامل من لوحة واحدة، بينما يبقى الموقع العام سريعاً عبر استجابات منظمة ومخزّنة مؤقتاً.
التقنيات المستخدمة
الواجهة الأمامية: Next.js 16، React 19، TypeScript، Tailwind CSS 4، Framer Motion، GSAP، Lenis
الواجهة الخلفية: Laravel 13 (PHP 8.3)، Laravel Sanctum، Postmark، Intervention Image
قاعدة البيانات: MySQL 8، Redis 7 (تخزين مؤقت + طوابير)
البنية التحتية: Docker Compose (تطوير)، Nginx + Supervisor (إنتاج)، Sentry
الأدوات: Pest، Vitest، Playwright، Lighthouse CI، axe-core، ESLint، Prettier، pnpm
