تطوير منصة متخصصة لعرض كورسات البرمجة المجانية والمدفوعة
تفاصيل المشروع
أرغب في إنشاء موقع ويب حديث ومتجاوب باسم “MoSHa </>”، وهو منصة متخصصة لعرض كورسات البرمجة المجانية والمدفوعة، بتصميم احترافي وواجهة مستخدم عصرية تدعم الوضعين الليلي والمضيء.
يتكون الموقع من أربع صفحات رئيسية:
Home – صفحة ترحيبية تضم شعار متحرك، فقرة تعريفية بالموقع، عبارات تحفيزية متحركة، وقسم خاص بالمطور مع روابط للتواصل (LinkedIn – GitHub – WhatsApp).
For Free – صفحة تحتوي على كورسات مجانية مع تصنيفها حسب المجال (Web, Cybersecurity, AI...) بطريقة بطاقات تفاعلية.
Baument / Payment – صفحة للكورسات المدفوعة (أونلاين وأوفلاين) تحتوي على الأسعار ونماذج تسجيل للمستخدمين.
Private – صفحة للتواصل المباشر مع المطور تحتوي على نموذج مراسلة وعدّاد زوار ديناميكي.
المتطلبات التقنية والتصميمية:
تصميم حديث بتدرجات ألوان مريحة (الأزرق كلون أساسي).
دعم الوضع الليلي والمضيء مع تبديل سلس.
أنيميشن احترافي (Hover, Scroll, Fade, Typing effect).
واجهة متجاوبة مع جميع الأجهزة.
استخدام خطوط حديثة مثل Poppins أو Inter.
تنظيم الكورسات في بطاقات تفاعلية أنيقة.
نموذج تواصل فعّال ورسمي.
قسم تعريفي بالمطور وسيرته الذاتية بشكل احترافي.
الهدف من المشروع:
تجميع جميع كورساتي المجانية والمدفوعة في مكان واحد يسهل على الزوار تصفحها والتواصل معي بشكل مباشر، مع واجهة جذابة تعكس هوية المطور وتوفر تجربة مستخدم متكاملة.
MongoDB – قاعدة البيانات لتخزين معلومات الكورسات والمستخدمين والزوار. Express.js – لبناء الخادم (Server) وواجهة الـ API الخاصة بالموقع. React.js – لتصميم واجهات المستخدم (UI) التفاعلية والصفحات الديناميكية. Node.js – لتشغيل الخادم وتوصيل الواجهة الأمامية مع الخلفية. TypeScript / JavaScript (ES6+) – لكتابة كود نظيف وقابل للتوسع. HTML5 / CSS3 / Tailwind CSS – لتصميم واجهة عصرية ومتجاوبة تدعم الوضعين (Light & Dark Mode). Framer Motion / AOS / GSAP – لإضافة أنيميشن احترافي (Fade, Scroll, Hover, Typing). Axios / Fetch API – للتعامل مع البيانات بين الخادم والواجهة. Git & GitHub – لإدارة الإصدارات وتوثيق الكود. Vercel / Render / Netlify – لنشر المشروع أونلاين باحترافية
مواقعي السابقة (أعمالي)
موقع كورسات – MoSHa Courses Platform
رابط: https://dracode-courses-p...
وصف: منصة تعليمية حديثة تجمع الكورسات، الأدوات، والـ Roadmaps بشكل منظم وسهل الاستخدام.
️ موقع مطعم متكامل – Restaurant Website
رابط: https://mohamedsaadha.git...
وصف: موقع متكامل لمطعم، يحتوي على قائمة طعام تفاعلية وتصميم عصري متجاوب مع جميع الأجهزة.
موقع مدرس رياضيات – Math Teacher Website
رابط: https://lnkd.in/dEZivcg5
وصف: موقع تعريفي خاص بمدرس رياضيات، يحتوي على معلومات التواصل والدروس والخدمات التعليمية.
🧑 ملف شخصي (React) – React Portfolio
وصف: ملف شخصي تفاعلي باستخدام React يعرض المشاريع والمهارات بطريقة احترافية.
ملف شخصي (HTML/CSS/JS) – Static Portfolio
موقع ويب متكامل باسم “MoSHa </>” مبني بتقنيات MERN Stack، يشمل على الأقل 6 صفحات رئيسية وهي:
Home: تحتوي على الشعار المتحرك، فقرة تعريفية بالموقع، عبارات تحفيزية وآيات قرآنية بأنيميشن سلس، وقسم المطوّر مع روابط التواصل.
For Free: لعرض الكورسات المجانية في بطاقات منسقة مع تأثيرات حركة (Hover / Scroll / Fade).
Baument / Payment: لعرض الكورسات المدفوعة (أونلاين وأوفلاين) مع الأسعار ونماذج تسجيل تفاعلية.
Private: صفحة للتواصل المباشر مع المطوّر + عدّاد زوار ديناميكي يتحدث تلقائيًا.
Roadmaps: صفحة تحتوي على خرائط تعلم منظمة (Front-End, Back-End, Full Stack, Cybersecurity...) مع تصميم تفاعلي وأيقونات مرئية.
Profile: صفحة الملف الشخصي للمستخدم أو المطور، تتضمن المعلومات الشخصية، الكورسات المنجزة، والإعدادات (الوضع الليلي/المضيء، تعديل البيانات...).
لوحة تحكم (Dashboard أو Admin Panel) لإدارة الكورسات والمستخدمين والرسائل (إضافة، تعديل، حذف).
واجهة مستخدم (UI/UX) عصرية ومتحركة، متجاوبة تمامًا مع جميع الأجهزة (موبايل، تابلت، كمبيوتر).
دعم الوضعين الداكن والمضيء (Dark/Light Mode) مع مفتاح تبديل وانتقالات سلسة.
تأثيرات أنيميشن احترافية باستخدام Framer Motion أو AOS أو GSAP، في الأزرار، العناوين، والعناصر أثناء التمرير.
نموذج تواصل فعّال (Contact Form) يرسل البيانات إلى البريد الإلكتروني للمطور.
نظام عدّاد زوار ديناميكي (Visitor Counter) يعمل في الوقت الفعلي.
نشر المشروع بالكامل على منصة مثل Vercel أو Render أو Netlify مع تسليم الكود الكامل على GitHub.
دليل تشغيل (Documentation) مبسّط يوضح كيفية التعديل والإضافة مستقبلاً.
العروض المقدمة
Antony G.
السلام عليكم ورحمة الله، اطلعت على تفاصيل مشروع MoSHa / وأستطيع تنفيذ المطلوب بالكامل باستخدام MERN Stack باحترافية عالية وواجهة حديثة. سأنفذ لك: تصميم عصري ومت...