نظرة عامة على المشروع
DevAura منصة تعليمية مجانية وخالية من الإعلانات بُنيت لمجتمع التقنية الناطق بالعربية، حيث تجعل الموارد التعليمية المتناثرة والمحجوبة خلف الدفع غالباً إيجادَ مسار واضح أمراً صعباً. تجمع المنصة مسارات تعلّم منظمة ومكتبة موارد منسقة ودليل أدوات ذكاء اصطناعي واختبارات تفاعلية في مكان واحد.
بنيتُ DevAura كمشروع تخرّج متكامل (Full-Stack) — واجهة أمامية بـ Next.js مقترنة بـ REST API مبني بـ Laravel — يغطي كل شيء من تجربة المستخدم والمصادقة إلى لوحة التحكم الإدارية والنشر.
الميزات الرئيسية
- مسارات تعلّم منظمة — مسارات موجَّهة عبر مواضيع منسقة
- مكتبة موارد منسقة — مواد تعليمية مُنتقاة في مكان واحد
- دليل أدوات ذكاء اصطناعي — كتالوج لأدوات ذكاء اصطناعي مفيدة
- اختبارات تفاعلية — ترتيب أسئلة عشوائي، وشروحات لكل سؤال، ومؤقّت تنازلي، وتتبّع للتقدّم، وشاشة مراجعة، وحفظ في localStorage
- مصادقة كاملة — بريد/كلمة مرور مع تحقق بريدي برمز من 6 أرقام، وJWT مع تجديد تلقائي، وتسجيل دخول عبر Google، وإعادة تعيين كلمة المرور
- المفضلة — حفظ الموارد للوصول السريع إليها
- لوحة تحكم إدارية — إدارة المحتوى مع ملخص تحليلي
- واجهة مصقولة — تخطيط متجاوب يبدأ من الهاتف، ووضعان داكن/فاتح، ورسوم متحركة بـ Framer Motion وLottie
أبرز الجوانب التقنية
- مصادقة JWT بحارسين منفصلين — حارسان منفصلان (api وwebsite) يعزلان مستخدمي الإدارة ومستخدمي الموقع دون تصادم الجلسات
- تحكم بالوصول قائم على الأدوار — Spatie Laravel Permission مع وسيط صلاحيات يعطي الأولوية لـ JSON (CheckPermissionApi)
- تحقق بريدي بـ OTP — رموز من 6 أرقام بمدة صلاحية 15 دقيقة، تُرسَل عبر Laravel Mail وNotifications
- تسجيل دخول عبر Google — دخول اجتماعي عبر Laravel Socialite، معزول عن حسابات كلمة المرور
- إزالة تكرار المشاهدات حسب الجلسة — تُسجَّل المشاهدات لكل معرّف جلسة لتجنّب تضخّم الأعداد
- إعجابات قابلة للتبديل — فهرس فريد مركّب يضمن إعجاباً واحداً لكل مستخدم على كل عنصر
- وضع المعرض (Portfolio mode) — يمكن تعطيل الخلفية لتشغيل الواجهة الأمامية على بيانات تجريبية
- API مُحصَّن — تجزئة bcrypt، وتحديد معدّل الطلبات، وإبطال الرموز عند تسجيل الخروج، ومنع تعداد المستخدمين
مساهماتي
- بنيتُ المنصة بالكامل (Full-Stack) — واجهة أمامية بـ Next.js 16 وREST API بـ Laravel 10
- صممتُ ونفّذتُ نظام مصادقة JWT بحارسين منفصلين مع تسجيل دخول Google وتحقق بريدي بـ OTP
- نفّذتُ التحكم بالوصول القائم على الأدوار بـ Spatie Permission ووسيط صلاحيات يعطي الأولوية لـ JSON
- طوّرتُ محرّك الاختبارات التفاعلية بترتيب عشوائي ومؤقّتات وشروحات وحفظ للتقدّم
- بنيتُ API الموقع العام وAPI لوحة التحكم الإدارية، بما يشمل التحليلات والاقتراحات وتتبّع المشاهدات والإعجابات
- صممتُ الواجهة المتجاوبة مع وضعين داكن/فاتح وحركة باستخدام Framer Motion وLottie
- تولّيتُ التصميم والتطوير والنشر من البداية إلى النهاية
التحديات والحلول
التحدي: احتاج مستخدمو الإدارة ومستخدمو الموقع إلى مصادقة منفصلة تماماً دون تصادم جلساتهم.
الحل: حارسان مخصّصان لـ JWT — api وwebsite — لكلٍّ منهما مزوّد مستخدمين خاص، ما يبقي الجمهورين معزولين تماماً.
النتيجة: يُصادِق المسؤولون والمتعلّمون باستقلالية مقابل الـ API نفسه دون أي خطر للتداخل.
التحدي: كانت أعداد مشاهدات الموارد والمحتوى تتضخّم بسهولة بسبب الطلبات المتكررة من الزائر نفسه.
الحل: إزالة تكرار قائمة على الجلسة تسجّل المشاهدة مرة واحدة لكل معرّف جلسة قبل زيادة العدّاد.
النتيجة: تعكس مقاييس المشاهدة تفاعلاً حقيقياً بدلاً من حجم الطلبات الخام.
التقنيات المستخدمة
الواجهة الأمامية: Next.js 16، React 19، TypeScript، Tailwind CSS 4، Framer Motion، Lottie React، Radix UI، React Hook Form
الواجهة الخلفية: Laravel 10 (PHP 8.1+)، JWT Auth، Spatie Laravel Permission، Laravel Socialite، GuzzleHTTP
قاعدة البيانات: MySQL 8
الأدوات: pnpm، ESLint، PostCSS، Vercel
