📋 متطلبات المشروع
في مشروع التخرج هذا، ستقوم ببناء منصة تعليمية مشابهة لهذه الأكاديمية. المشروع يهدف إلى تطبيق كل المهارات التي اكتسبتها خلال المستويات الأربعة السابقة في مشروع واحد متكامل وقابل للنشر على الإنترنت.
منصة التعليم التي ستبنيها يجب أن تشمل نظام تسجيل دخول، لوحة تحكم للمستخدمين، عرض الدورات، تتبع التقدم، وواجهة إدارية. هذا المشروع سيكون إضافة قوية لمعرض أعمالك (Portfolio) وسيساعدك في الحصول على فرص عمل حقيقية.
🛠️ التقنيات المطلوبة
⚛️ React
🟢 Node.js
🍃 MongoDB
🔐 JWT Auth
☁️ Deployment
🎨 CSS3 / Tailwind
🧪 Jest Testing
🎯 مراحل المشروع بالتفصيل
📐 المرحلة 1: التخطيط والتصميم (يوم 1-2)
قبل كتابة أي سطر كود، يجب أن تخطط للمشروع بشكل دقيق. التخطيط الجيد يوفر ساعات من التصحيح لاحقاً.
- رسم الـ Wireframes: استخدم أدوات مثل Figma أو Draw.io لرسم تخطيط كل صفحة في المنصة. حدد مكان كل عنصر: الهيدر، القائمة، المحتوى، والفوتر.
- تصميم قاعدة البيانات: حدد المجموعات (Collections) المطلوبة: Users, Courses, Lessons, Progress, Certificates. ارسم العلاقات بينها وحدد الحقول لكل مجموعة.
- تحديد الـ API Endpoints: اكتب قائمة كاملة بالـ Endpoints: GET /api/courses, POST /api/auth/register, PUT /api/progress/:id, إلخ. حدد الـ Request/Response لكل endpoint.
- اختيار الألوان والتصميم: حدد نظام الألوان، الخطوط، والتصميم العام للمنصة. يفضل استخدام نظام تصميم متسق.
💡 نصيحة: خصص يوم كامل للتخطيط. كل ساعة تقضيها في التخطيط توفر 3 ساعات في التطوير.
⚙️ المرحلة 2: بناء الـ Backend (يوم 3-7)
Backend هو العمود الفقري للتطبيق. هنا ستبني الـ API الذي سيتعامل مع قاعدة البيانات ويوفر البيانات للـ Frontend.
- إعداد بيئة العمل: أنشئ مشروع Node.js جديد، ثبّت Express, Mongoose, dotenv, cors, bcryptjs, jsonwebtoken.
- إعداد MongoDB: أنشئ قاعدة بيانات على MongoDB Atlas (مجانية). اربطها بالمشروع باستخدام Mongoose.
- نماذج البيانات (Models): أنشئ Models لـ User (الاسم، الإيميل، كلمة المرور، الدور)، Course (العنوان، الوصف، الدروس)، Lesson (العنوان، المحتوى، الفيديو)، Progress (المستخدم، الدورة، التقدم).
- API Routes (CRUD): أنشئ Routes كاملة: إنشاء/قراءة/تحديث/حذف للدورات والدروس. تأكد من استخدام async/await ومعالجة الأخطاء (Error Handling).
- JWT Authentication: أنشئ نظام تسجيل دخول كامل: Register, Login, Protect Routes باستخدام Middleware. استخدم bcrypt لتشفير كلمات المرور.
- Validations: تأكد من صحة البيانات المدخلة باستخدام express-validator أو Joi.
💡 نصيحة: اختبر كل API Endpoint باستخدام Postman أو Thunder Client قبل الانتقال للـ Frontend.
🎨 المرحلة 3: بناء الـ Frontend (يوم 8-14)
Frontend هو الواجهة التي يراها المستخدم. يجب أن تكون سريعة، جميلة، وسهلة الاستخدام.
- إعداد React: أنشئ مشروع React باستخدام Vite (أسرع من Create React App). ثبّت React Router DOM, Axios, و Tailwind CSS.
- Components و Routing: قسّم الواجهة لـ Components صغيرة وقابلة لإعادة الاستخدام: Header, Footer, CourseCard, LessonList, ProgressBar. أنشئ Routes لكل صفحة.
- ربط الـ API: استخدم Axios لإرسال Requests للـ Backend. أنشئ ملف API مركزي يحتوي على كل الـ Endpoints. تعامل مع Loading States والأخطاء.
- State Management: استخدم Context API أو Zustand لإدارة حالة التطبيق: بيانات المستخدم، الدورات، التقدم. تجنب Prop Drilling.
- Responsive Design: تأكد أن المنصة تظهر بشكل جيد على الموبايل والتابلت. استخدم Flexbox وGrid وMedia Queries.
- Forms & Validation: أنشئ Forms لتسجيل الدخول والتسجيل مع Validation فوري. أضف رسائل خطأ واضحة.
💡 نصيحة: ابدأ ببناء صفحة واحدة كاملة (مثل صفحة الدورات) قبل الانتقال للصفحة التالية.
🚀 المرحلة 4: الاختبار والنشر (يوم 15)
الاختبار ضروري قبل النشر. تأكد من أن كل شيء يعمل كما هو متوقع.
- اختبار الوظائف: جرب كل ميزة: التسجيل، تسجيل الدخول، عرض الدورات، تتبع التقدم. تأكد من عدم وجود أخطاء في Console.
- اختبار الأداء: استخدم Lighthouse في Chrome DevTools. هدفك: Performance > 80, Accessibility > 90, SEO > 90.
- نشر الـ Backend: استخدم Render أو Railway لنشر الـ Node.js API. تأكد من إعداد متغيرات البيئة (Environment Variables) بشكل صحيح.
- نشر الـ Frontend: استخدم Vercel أو Netlify لنشر React App. ربط الـ Domain (اختياري) أو استخدم الرابط المجاني.
- ربط الـ Frontend مع Backend المنشور: غيّر الـ Base URL في Axios ليشير للـ Backend المنشور على Render/Railway.
- اختبار نهائي: افتح التطبيق من جهاز آخر أو المتصفح المتخفي. تأكد من أن كل شيء يعمل.
💡 نصيحة: خصص يوم كامل للنشر والاختبار. لا تستعجل هذه المرحلة.