منصة تعليم برمجة

تم تنفيذ مشروع واجهة ويب متكاملة لمنصة تعليمية تفاعلية باسم LearnCode، موجهة للمبتدئين والمستوى المتوسط لتعليم البرمجة بطريقة مبسطة وسلسة.

المنصة مصممة كنظام صفحة واحدة (SPA) باستخدام React Router لتوفير تجربة تنقل سلسة دون إعادة تحميل الصفحة. تم الاعتماد على تصميم احترافي وحديث يدعم التبديل بين الوضع النهاري والليلي، مع إمكانية تغيير اللغة بين العربية والإنجليزية.

تفاصيل الصفحات:

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

صفحة الدروس: تعرض جميع الدروس المتاحة مع فلتر حسب الموضوع (HTML، CSS، JavaScript).

صفحة الدرس: تشمل شرحًا مفصلًا، محرر أكواد تفاعلي، وتعليقات فورية على الحلول.

صفحات التسجيل وتسجيل الدخول: نماذج تحقق من البيانات للمستخدمين.

صفحة الملف الشخصي: عرض بيانات المستخدم ونسبة التقدم في الدروس.

صفحة الإعدادات: خيارات الوضع الليلي والنهاري، وتغيير اللغة، مع حفظ التفضيلات باستخدام LocalStorage.

الأدوات والتقنيات المستخدمة:

React.js

React Router

Tailwind CSS

Framer Motion (للحركات والانتقالات)

react-i18next (لتعدد اللغات)

LocalStorage لحفظ الإعدادات محليًا

Firebase أو Supabase (لاختيار تخزين بيانات المستخدمين)

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

اطرح سؤالك على ChatGPT