VS Code Clone

المشروع عبارة عن تطبيق ويب يحاكي واجهة برنامج VS Code الشهير، مع التركيز على بناء المكونات الأساسية وتطبيق مفاهيم برمجية متقدمة.

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

React

TypeScript

Redux Toolkit

Redux Persist

الهدف من المشروع:

الهدف الأساسي من المشروع لم يكن بناء محرر أكواد حقيقي، بل كان منصة لتطبيق مفاهيم متقدمة ومعقدة في بيئة عملية. تم التركيز على حل تحديات تقنية محددة، أهمها:

هيكل المجلدات والملفات (Folder/File Structure): تم بناء الهيكل بالكامل باستخدام الـ Recursion (الاستدعاء الذاتي)، مما سمح بالتحكم الكامل في كل مستوى من مستويات البيانات. هذه الطريقة أتاحت إمكانية فتح وإغلاق المجلدات بشكل ديناميكي وفعال، دون الحاجة لاستخدام أي مكتبات جاهزة.

إدارة الحالة (State Management): تم استخدام Redux Toolkit لإدارة حالة التطبيق بشكل مركزي، لتخزين الملفات المفتوحة والـ Tab النشط. هذا النهج أدى إلى التخلص من مشكلة الـ Prop Drilling، كما تم استخدام Redux Persist للحفاظ على البيانات حتى بعد إعادة تحميل الصفحة.

تصميم الواجهة (UI/UX):

تم استخدام Resizable Panels لإنشاء واجهة مرنة تشبه VS Code.

تم تطبيق Syntax Highlighting لعرض محتوى الملفات بطريقة مشابهة للمحرر الحقيقي.

المنهجية المتبعة:

تم تطبيق مبدأ "فرق تسد" (Divide and Conquer) لحل المشكلات المعقدة. هذا المبدأ ساعد على تقسيم المشكلة الرئيسية إلى أجزاء أصغر وأكثر قابلية للحل، مما أدى إلى بناء التطبيق بشكل تدريجي ومنظم.