portswigger identical website

هذا المشروع هو عبارة عن منصة تعليمية للأمن السيبراني (Cybersecurity Academy)، وهي مستوحاة من أكاديمية PortSwigger الشهيرة. يركز المشروع على تقديم مختبرات تفاعلية (Labs) لتدريب المطورين والمهتمين بالأمن على اكتشاف واستغلال الثغرات البرمجية.

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

React (Frontend):

واجهة المستخدم (UI): تم استخدام React لبناء واجهة سريعة ومنظمة. كما يظهر في الصورة، الواجهة مقسمة إلى شريط جانبي (Sidebar) يحتوي على تصنيفات الثغرات، وقائمة رئيسية تعرض المختبرات.

إدارة الحالة (State Management): لتتبع المختبرات التي تم حلها (المعلمة بكلمة "SOLVED") وتحديث حالة المستخدم فوراً.

التصميم: الواجهة نظيفة واحترافية، وتستخدم مكونات برمجية (Components) لعرض كل مختبر بمستوى صعوبته (Apprentice, Practitioner).

Node.js (Backend):

محرك المختبرات: يقوم Node.js بمعالجة الطلبات وإدارة قاعدة البيانات التي تحتوي على قائمة المختبرات وحالة المستخدمين.

المصادقة (Authentication): التعامل مع تسجيل الدخول والخروج (كما يظهر في زر LOGOUT).

بيئة المحاكاة: غالباً ما يتم ربط Node.js بمحركات لتشغيل "حاويات" (Containers) أو خوادم وهمية تحتوي على الثغرة الحقيقية التي يحتاج المستخدم لاختراقها.