Ghazawat Al-Nabi

غزوات النبي ﷺ

غزوات النبي ﷺ هي منصة ويب تفاعلية باللغة العربية تهدف إلى توثيق وعرض الغزوات العسكرية الـ27 للنبي محمد ﷺ بطريقة تعليمية وتفاعلية. توفر المنصة تجربة قراءة متكاملة تجمع بين المحتوى التاريخي، السرد القصصي، التعليق الصوتي، الخط الزمني التفاعلي، ومتابعة تقدم المستخدم والإنجازات التي يحققها أثناء القراءة.

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

إدارة المحتوى ودقة البيانات

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

ولضمان اتساق هذه البيانات ودقتها، تم تطوير نظام تحقق آلي (Data Integrity Script) يقوم بفحص سجلات المحتوى والتأكد من اكتمال البيانات وصحة العلاقات بينها، بدل الاعتماد على المراجعة اليدوية لكل سجل في كل مرة.

الأداء وتجربة المستخدم

نظرًا لأن المشروع يعتمد على كمية كبيرة من المحتوى، كان تحسين الأداء جزءًا أساسيًا من عملية التطوير. تم استخدام Code Splitting وLazy Loading لتحميل أجزاء التطبيق عند الحاجة فقط، مما ساهم في تقليل حجم JavaScript الذي يتم تحميله في الصفحة الرئيسية بنسبة 63%.

كما تم الاهتمام بجعل الموقع سريعًا وقابلًا للاستخدام حتى مع كمية كبيرة من المحتوى، مع توفير تجربة تنقل سلسة وتفاعلية باستخدام تقنيات الويب الحديثة.

تحسين محركات البحث وPWA

تم بناء بنية SEO متكاملة للمشروع، شملت:

البيانات المنظمة Structured Data / JSON-LD لمساعدة محركات البحث على فهم المحتوى.

إنشاء Sitemap ديناميكي لتسهيل اكتشاف صفحات الموقع.

استخدام Open Graph Metadata لتحسين طريقة ظهور صفحات الموقع عند مشاركتها على منصات التواصل.

دعم Progressive Web App (PWA) بحيث يمكن تثبيت الموقع على الأجهزة واستخدامه حتى في وضع عدم الاتصال بالإنترنت.

نظام الإنجازات والتفاعل

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

أهم ما تم تعلمه

ساهم المشروع في تطوير مجموعة من المهارات التقنية، من أبرزها:

فهم كيفية قياس حجم JavaScript Bundle والعمل على تقليله بشكل فعلي.

استخدام Code Splitting وLazy Loading لتحسين أداء تطبيقات الويب.

بناء بنية SEO متكاملة باستخدام Structured Data وSitemaps وOpen Graph.

تطوير تطبيقات PWA مع دعم التثبيت والعمل دون اتصال بالإنترنت.

بناء أدوات آلية للتحقق من سلامة واتساق البيانات بدل الاعتماد على المراجعة اليدوية.

تصميم نظام إنجازات يحفز المستخدم على إكمال المحتوى.

التعامل مع مشروع يعتمد على كمية كبيرة من المحتوى المنظم مع الحفاظ على الأداء وسهولة الوصول.

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

React — بناء واجهة المستخدم.

Vite — بناء المشروع وإدارة عملية التطوير.

Tailwind CSS — تصميم وتنسيق الواجهات.

Framer Motion — إضافة الحركات والتفاعلات البصرية.

React Router — إدارة التنقل بين صفحات المنصة.

PWA — توفير التثبيت، التخزين المؤقت، ودعم الاستخدام دون اتصال.