مشروع 03 · 2026
Hackers Academy
منصة تعليمية · أمن سيبراني · LMS · تحسينات Frontend
منصة تدريب في الأمن السيبراني عملت عليها من ناحية تحسين تجربة الـ LMS، صفحات الكورسات، ربط البيانات مع الـ API، تحسين الجلسات بعد تسجيل الدخول، مراجعة تدفق الدفع، تحسينات تقنية للـ SEO/GEO/AEO، وتجهيز build مستقر للإطلاق.
سياق المشروع
Hackers Academy منصة تدريب في الأمن السيبراني يتصفح فيها المستخدمون الكورسات ويسجّلون ويدفعون ثم يتابعون محتوى الكورس وهم مسجّلو الدخول. وأغلب ما يهم يحدث بعد تسجيل الدخول، وهو تحديدًا أصعب ما في المنصات التعليمية.
المشكلة
احتاجت المنصة إلى تجربة أكثر موثوقية وصقلًا عبر صفحات الكورسات وتدفقات الـ LMS وسلوك تسجيل الدخول وجاهزية الإطلاق. بعض الأجزاء كانت تعتمد على بيانات مرتبطة بالجلسة أو استجابات مخزّنة في الكاش أو افتراضات في الواجهة الأمامية تحتاج مراجعة وتنظيفًا قبل الإطلاق.
المستخدمون المستهدفون
- متعلّمون يتصفحون ويقارنون كورسات الأمن السيبراني قبل التسجيل
- طلاب مسجّلون يعودون لمتابعة كورس دفعوا ثمنه بالفعل
- مستخدمون ينتقلون بين الأجهزة والجلسات ويتوقعون بقاء تسجيل الدخول
- مشترون محتملون يقيّمون السعر والمدرّب ومحتوى الكورس
رحلة المستخدم الأساسية
- اكتشاف الكورسات ومقارنتها، مع ظهور الأسعار والمدرّبين
- إنشاء حساب أو تسجيل الدخول
- التسجيل في الكورس وإتمام الدفع
- الوصول إلى My Courses ومتابعة ما توقفت عنده الجلسة
- العودة لاحقًا، على الجهاز نفسه أو جهاز آخر، مع بقاء تسجيل الدخول
القيود
- باك إند و API قائمان تملكهما المنصة: كان على الواجهة الأمامية العمل معهما لا استبدالهما
- نقاط نهاية مرتبطة بالجلسة وسلوك كاش يؤثران على ما يراه المستخدم
- كان يجب أن يبقى منطق الدفع متحكَّمًا به من الباك إند، لا معتمدًا على قيم الواجهة الأمامية
- كان يجب مراجعة التعامل مع البيانات الحساسة لا افتراض سلامته
- جرى العمل قبل الإطلاق، فكان الموعد النهائي هو build إنتاجي مستقر
دوري في المشروع
- تحسينات UI/UX وFrontend
- ربط بيانات الكورسات مع الـ API
- تجربة تسجيل الدخول والجلسات
- معالجة مشاكل الكاش
- مراجعة تدفق الدفع
- إعداد تقني للـ SEO/GEO/AEO
- تجهيز build للإطلاق
ما الذي نفّذته بالضبط
- تحسينات UI/UX داخل صفحات الكورسات والـ LMS: من تصميم مؤيد الدالاتي
- تنفيذ الواجهة الأمامية وربط بيانات الكورسات بالـ API: طوّرها مؤيد الدالاتي
- ثبات تسجيل الدخول وسلوك الجلسة وإصلاح مشاكل الكاش: عمل واجهة أمامية نفّذه مؤيد الدالاتي
- تدفق الدفع: راجعه مؤيد الدالاتي من جهة الواجهة الأمامية؛ ويبقى منطق الدفع والمجاميع متحكَّمًا بهما من الباك إند
- باك إند المنصة والـ API ومصدر بيانات الكورسات: قائم وتملكه المنصة، ولم يُبنَ هنا
- بنية SEO / GEO / AEO التقنية وملف llms.txt: نفّذها مؤيد الدالاتي
- الحالة: تم التحقق من أن المنصة تعمل على hackersacademy.com
أبرز ما عملت عليه
- تحسين تجربة المستخدم داخل صفحات الكورسات والـ LMS
- ربط بيانات الكورسات والأسعار والمدربين وMy Courses مع الـ API
- تحسين بقاء المستخدم داخل الجلسة بعد تحديث الصفحة
- معالجة مشاكل مرتبطة بالكاش والـ session-dependent endpoints
- تحسين الأمان ومنع تخزين بيانات حساسة داخل localStorage أو sessionStorage
- مراجعة تدفق الدفع والتأكد أن منطقه يعتمد على بيانات من الباك إند
- إضافة ملفات مثل llms.txt لتحسين قابلية الفهم من أدوات البحث والذكاء الاصطناعي
الإعداد التقني
- ربط الكورسات والأسعار والمدربين والكورسات المسجّلة مع الـ API
- ثبات تسجيل الدخول والجلسة بعد تحديث الصفحة
- إصلاح مشاكل الكاش والـ session-dependent endpoints
- مراجعة أمنية: عدم تخزين بيانات حساسة في localStorage/sessionStorage
- مراجعة تدفق الدفع بحيث تعتمد المجاميع على بيانات الباك إند
- تحسينات تقنية للـ SEO/GEO/AEO وملف llms.txt لجاهزية بحث الذكاء الاصطناعي
- إصلاحات UI نهائية وbuild مستقر للإنتاج
النتيجة الموثقة
أصبحت تجربة المنصة أوضح وأكثر ثباتًا للمستخدمين، وتحسّن ربط البيانات داخل صفحات الكورسات والـ LMS، وصارت المنصة أفضل استعدادًا للإطلاق من ناحية تجربة المستخدم والجلسات والدفع والبنية التقنية وتحسينات البحث والذكاء الاصطناعي.
التقنيات والأدوات
لديك منتج أو رحلة مشابهة؟
أرسل رابط المنتج أو الموقع والمشكلة التي تحاول حلها، وستحصل على قراءة صادقة للنطاق ونوع التعاون.