CSCraft

موقع "CSCRAFT" – منصة تعليمية تفاعلية بتصميم مستوحى من ألعاب الريترو

قمتُ بتصميم وتطوير منصة CSCRAFT كجزء من مشروعي للتخرج، وهي منصة تعليمية تفاعلية تهدف إلى جعل تعلم علوم الحاسوب أكثر متعة وفاعلية من خلال دمج آليات الألعاب في عملية التعلم، مع تصميم واجهة موقع مستوحاة من أسلوب ألعاب الريترو الكلاسيكية.

يتميز تصميم المنصة بأسلوب بصري يعتمد على عناصر البكسل (Pixel Art) والألوان الزاهية المستوحاة من ألعاب الأركيد القديمة، مما يمنح تجربة استخدام تجمع بين الطابع الكلاسيكي والواجهة العصرية السلسة.

تم تطوير المشروع باستخدام React للواجهة الأمامية، وDjango REST Framework للواجهة الخلفية، مع قاعدة بيانات MySQL.

كما تم تصميم ألعاب تعليمية مصغّرة باستخدام Unity بأسلوب الريترو لدعم المحتوى التعليمي بطريقة تفاعلية وممتعة.

تهدف المنصة إلى تحفيز الطلاب على التعلم من خلال نظام النقاط، الشارات، ولوحات الصدارة، مما يحوّل المحتوى الأكاديمي إلى تجربة تعليمية مفعمة بالتحدي والتشويق.

أهم الميزات

تعلم قائم على الألعاب (Gamified Learning): يتضمن كل فصل لعبة تعليمية مصغّرة لتقييم فهم الطالب بطريقة تفاعلية.

تحفيز واستمرارية: نظام مكافآت يعتمد على النقاط والمستويات يشجع الطالب على مواصلة التعلم وتحقيق التقدم.

مجتمع تفاعلي: يتيح التواصل بين الطلاب والأساتذة داخل المنصة بشكل مباشر.

تحليل الأداء: يعرض إحصائيات دقيقة حول تقدم الطالب وإنجازاته.

إدارة متكاملة للمحتوى: تمكن الأساتذة من إنشاء الدروس والألعاب التعليمية وتحديثها بسهولة.

أمان وموثوقية: يعتمد النظام على تسجيل دخول آمن وتشفير للبيانات لضمان الخصوصية.

التقنيات المستخدمة

Frontend: React, Bootstrap, CSS3, HTML5

Backend: Django REST Framework (Python)

Database: MySQL

Design & Games: Unity , Draw.io, Postman

CSCRAFT Platform – Interactive Gamified Learning Website with Retro-Style Design

I designed and developed CSCRAFT as my graduation project — an interactive learning platform that enhances computer science education through gamification and a retro video-game-inspired website design.

The website’s interface combines pixel-art visuals, vivid neon colors, and 8-bit typography, evoking the nostalgic charm of classic arcade games while maintaining a clean and responsive modern layout.

The project was built using React for the frontend, Django REST Framework for the backend, and MySQL for database management.

Educational mini-games were developed with Unity, complementing the retro design aesthetic with engaging, interactive learning experiences.

The platform addresses the challenge of student motivation in e-learning by integrating game mechanics such as points, badges, and leaderboards — turning theoretical lessons into an enjoyable and rewarding experience.

Key Features

Gamified Learning: Each chapter includes a retro-style mini-game that tests students’ understanding interactively.

Motivation and Retention: Encourages continuous learning through a points and rewards system.

Interactive Community: Enables students to communicate with teachers and peers in real time.

Progress Analytics: Displays detailed statistics about student performance and achievements.

Course and Content Management: Allows instructors to easily create and update lessons and educational games.

Security: Implements secure login, encrypted data, and a reliable backend infrastructure.

Technologies Used

Frontend: React, Bootstrap, CSS3, HTML5

Backend: Django REST Framework (Python)

Database: MySQL

Design & Games: Unity , Draw.io, Postman