شاليهاتي

هذا العمل يمثل المرحلة الأولى (الأساس البرمجي) لتطبيق ويب متكامل لحجز المنتجعات والشاليهات. ركزت في هذه المرحلة على تصميم وبرمجة "نظام المصادقة وتسجيل الدخول/إنشاء الحساب" (Authentication System) ليكون واجهة الاستقبال الأولى للمستخدمين. تم بناء هذه الصفحات بمعايير عالمية تجمع بين التصميم العصري الجذاب (Split-Screen UI) والبنية البرمجية القوية القابلة للتوسع (Scalable Architecture).

المميزات الأساسية للنظام (Features):

- واجهات مستخدم احترافية: تصميم عصري وجذاب يفصل بين المحتوى البصري (صور المنتجعات) ونماذج إدخال البيانات، لضمان تجربة مستخدم (UX) مريحة وسلسة.

- الوضع الليلي والنهاري (Dark/Light Mode): برمجة نظام متكامل للتبديل بين الثيم الداكن والفاتح بضغطة زر، مع حفظ تفضيلات المستخدم.

- تعدد اللغات (i18n & RTL/LTR): دعم كامل للغتين العربية والإنجليزية باستخدام مكتبة react-i18next، مع قلب اتجاه الواجهة بالكامل (من اليمين لليسار والعكس) بسلاسة تامة.

- نظام حماية وتحقق متقدم (Form Validation): برمجة نظام تحقق لحظي من مدخلات المستخدم (Real-time Validation) باستخدام التعابير القياسية (Regex)، لضمان صحة البريد الإلكتروني وقوة كلمة المرور قبل إرسالها للخادم، مع عرض رسائل خطأ دقيقة (Helper Texts).

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

- React.js & Vite: بناء المشروع باستخدام Vite لضمان سرعة فائقة في التطوير وتحميل التطبيق.

- React Router v6: بناء نظام توجيه (Routing) قوي لربط الصفحات (Login, Register, Home, Search).

- Material-UI (MUI): توظيف مكونات MUI المتقدمة لبناء حقول الإدخال (TextFields) والأزرار التفاعلية بطريقة نظيفة.

- State Management: إدارة حالة النماذج (Forms State) المعقدة باحترافية، وتتبع أخطاء الإدخال لكل حقل على حدة.

القيمة المضافة (التفاصيل التقنية):

تكمن قوة هذا المشروع في "جودة كتابة الكود" (Clean Code). قمت ببناء هيكل مجلدات (Folder Structure) احترافي يفصل بين المكونات (Components)، الصفحات (Pages)، والسياقات (Contexts). كما استخدمت خطافات مخصصة (Custom Hooks) مثل useThemeSelected لتقليل تكرار الكود، مما يجعل النظام جاهزاً للربط مع أي واجهة برمجة تطبيقات (Backend API) بسهولة تامة في المراحل القادمة.