VS Code UI Clone

وصف المشروع:

واجهة أمامية (Frontend) تحاكي محرر الأكواد الشهير Visual Studio Code من حيث الشكل والتصميم، بدون وظائف تفاعلية متقدمة. المشروع يركز على بناء تصميم متجاوب وواقعي باستخدام تقنيات حديثة.

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

Next.js – لبناء صفحات الواجهة.

Tailwind CSS – لتنسيق وتصميم الواجهة بسهولة وسرعة.

React Components – لتقسيم أجزاء الصفحة مثل الشريط الجانبي، شريط الأدوات، نافذة الكود، وشريط الحالة.

أيقونات مثل Heroicons أو React Icons لمحاكاة شكل أيقونات VS Code.

? مميزات المشروع:

تصميم يشبه VS Code من حيث الألوان (Dark Theme)، الخطوط، وتوزيع العناصر.

شريط جانبي يحتوي على أيقونات (Explorer – Search – Git – Extensions).

مساحة رئيسية بها كود وهمي (نص ثابت) لعرض شكل نافذة الكود.

شريط علوي Tabs يمثل الملفات المفتوحة.

شريط سفلي (Status Bar) يضيف واقعية أكثر للتصميم.

متجاوب على الشاشات المختلفة (Responsive).

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

تدريب عملي على تصميم واجهات معقدة باستخدام Tailwind CSS.

تحسين مهارات تقسيم الواجهة إلى مكونات (Components).

محاكاة برامج سطح المكتب باستخدام تقنيات الويب.