Corals and Shells

موقع إلكتروني ثنائي اللغة (إنجليزي / عربي) مع نظام إدارة محتوى مخصّص لأكاديمية غوص مقرّها الخُبر في المملكة العربية السعودية. قمتُ بتصميم وبناء المشروع بالكامل — موقع تعريفي للأكاديمية مدعوم بلوحة تحكم إدارية مخصّصة يستخدمها العميل لإدارة كل المحتوى بنفسه.

وظيفة الموقع

يعرض الموقع دورات الغوص والبرامج والفعاليات والرحلات التي تقدّمها الأكاديمية، ويُعرّف بفريق العمل، ويتيح للزوّار تصفّح كل المحتوى باللغة الإنجليزية أو العربية مع دعم كامل للكتابة من اليمين إلى اليسار (RTL). وخلف الموقع لوحة تحكم إدارية مبنية على Filament يدير من خلالها العميل المنتجات والدورات والمقالات والفعاليات والرحلات وأعضاء الفريق واللافتات وإعدادات الموقع — دون الحاجة إلى مطوّر للتحديثات اليومية.

التقنيات المستخدمة

الواجهة الخلفية (Backend): Laravel 11 (PHP 8.2+)، قاعدة بيانات MySQL، لوحة تحكم Filament، وواجهة برمجية RESTful API

الواجهة الأمامية (Frontend): React 18 مع TypeScript، وTailwind CSS، وVite، وFramer Motion، وRTK Query (Redux Toolkit)

دعم اللغات: react-i18next مع طبقة ترجمة في قاعدة البيانات — كل عنصر محتوى متوفّر باللغتين

التصميم: تصميم متجاوب يعتمد مبدأ "الجوال أولاً" (Mobile-first) مع رسوم متحركة بطابع بحري مخصّص (فقاعات، أمواج، عناصر زينة تحت الماء) محسّنة للأداء على الأجهزة المحمولة

أبرز المميزات

ثنائي اللغة بالكامل (إنجليزي/عربي) مع دعم الكتابة من اليمين لليسار ومبدّل لغة مدمج

نظام إدارة محتوى مخصّص يتيح للعميل امتلاك محتواه وتحديثه باستقلالية تامة

واجهة متحركة ذات طابع بحري بتصميم احترافي هادئ يحاكي أعماق البحر

بنية حديثة منفصلة — واجهة برمجية بـ Laravel يستهلكها تطبيق React + TypeScript أحادي الصفحة (SPA)