CTF Platform

منا بتطوير منصة شاملة ومتقدمة لتحديات الأمن السيبراني (Capture The Flag – CTF) موجهة للطلاب والمهتمين بتعلم الاختراق الأخلاقي بطريقة عملية وتفاعلية.

المنصة تم بناؤها باستخدام React مع واجهة حديثة، وسرعة عالية، وتجربة استخدام سلسة.

الفكرة العامة للمشروع

الهدف من المشروع هو إنشاء منصة تساعد المتعلمين على تطوير مهاراتهم في الأمن السيبراني عبر تقديم تحديات واقعية في عدة مجالات، مثل:

Web Exploitation

Cryptography

OSINT

Reverse Engineering

Forensics

Pwn / Binary Exploitation

كل تحدّي يحتوي على وصف، نقاط، مستوى صعوبة، ونظام للتحقق من صحة الـ Flag وتحميل النقاط للمستخدم.

? مميزات المنصة

? نظام التسجيل والدخول

إنشاء حساب

تسجيل الدخول

تخزين رمز الجلسة JWT

حماية الصفحات الخاصة بالمستخدم

تفعيل الـ Auto-Redirect حسب حالة المستخدم

? إدارة التحديات

عرض جميع التحديات في واجهة جميلة

البحث باسم التحدّي

تصفية التحديات حسب:

الفئة

مستوى الصعوبة

الحالة (منجز / غير منجز)

فتح التحدي داخل نافذة Modal تحتوي على:

وصف كامل

النقاط

الملفات المرفقة (في حال وجودها)

خانة لإرسال الـ Flag والتحقق منه

? نظام النقاط والإنجازات

كل مستخدم يحصد نقاطًا عند حل التحديات

عرض قائمة بجميع التحديات المحلولة

نافذة Achievements (إنجازات) حسب عدد الحلول

? صفحة الملف الشخصي

معلومات المستخدم

الإحصائيات العامة

عدد التحديات المحلولة

نسبة التقدم

الفئات التي يتقنها المستخدم أكثر

? لوحة المتصدرين (Leaderboard)

ترتيب المستخدمين حسب النقاط

عرض المرتبة العالمية لكل مشارك

تحديث لحظي عند تحقيق نقاط جديدة

? واجهة جذابة وسريعة

تصميم حديث Dark UI

عناصر تفاعلية

سلاسة في التنقل بين الصفحات

استخدام Tailwind CSS لاحترافية عالية

? الجانب التقني

?️ التقنية المستخدمة في الواجهة الأمامية

React

React Router

Axios

TailwindCSS

Context API

Vite

? الاتصال بالواجهة الخلفية

قمنا ببناء نظام خدمات (Services Layer) للتعامل مع مختلف الـ endpoints الخاصة بالـ API، مثل:

تسجيل الدخول

التحديات

إرسال العلم

الإحصائيات

الملف الشخصي