برمجة وتصميم تطبيق ويب سياحي متكامل (React.js & Node.js)

نبذة عن المشروع: مشروع "Vista Voyages" هو تطبيق ويب متكامل من نوع صفحة واحدة (Single Page Application - SPA)، تم تصميمه وبرمجته ليكون منصة حديثة وسريعة لحجز الرحلات السياحية. يهدف المشروع إلى سد الفجوة بين الكتيبات السياحية التقليدية وأنظمة الحجز المعقدة، من خلال تقديم تجربة مستخدم (UX) سلسة، وتصميم عصري، وأداء فائق السرعة. ينقسم النظام إلى واجهتين أساسيتين: واجهة المستخدم (العميل): لاستكشاف الوجهات، البحث المتقدم، وإتمام الحجوزات بخطوات بسيطة. لوحة تحكم الإدارة (Admin Dashboard): نظام متكامل لإدارة المحتوى، الحجوزات، والإيرادات بشكل لحظي. 🔥 أهم المميزات والخصائص: أولاً: خصائص المستخدم (العميل) بحث ديناميكي ذكي: إمكانية فلترة الرحلات حسب الوجهة والتواريخ بشكل فوري. نظام حجز متقدم: حساب التكلفة الإجمالية لحظياً بناءً على عدد الأفراد مع إمكانية تطبيق أكواد الخصم (Promo Codes). لوحة تحكم شخصية: تتيح للمستخدم متابعة تاريخ حجوزاته وحالة كل رحلة (مؤكدة/قيد الانتظار). تصميم متجاوب (Responsive): يعمل بكفاءة وتناسق تام على جميع الشاشات (موبايل، تابلت، ديسكتوب). ثانياً: خصائص الإدارة (Admin Panel) إحصائيات حية (Live Analytics): متابعة إجمالي الإيرادات، عدد الحجوزات النشطة، وعدد المستخدمين المسجلين. إدارة الرحلات (CRUD): إضافة، تعديل، وحذف الرحلات والعروض السياحية بكل سهولة لتنعكس فوراً على واجهة المستخدم. إدارة الحجوزات والركاب: استعراض قوائم الركاب لكل رحلة، والبحث عن حجوزات محددة. نظام الخصومات: إنشاء وإدارة كوبونات الخصم لعمل عروض ترويجية للعملاء. 💻 التقنيات والأدوات المستخدمة (Tech Stack): واجهة المستخدم (Frontend): تم بناء الواجهة باستخدام React.js (v18) لضمان سرعة التحديثات وعدم الحاجة لإعادة تحميل الصفحة. استخدمت Vite كأداة بناء (Build Tool) للحصول على أداء تطوير أسرع وتصدير كود محسن (Optimized Build). تم التصميم باستخدام CSS Variables لضمان مرونة وسهولة تعديل الهوية البصرية (Theme)، مع استخدام أيقونات Lucide React. الواجهة الخلفية (Backend) وقاعدة البيانات: تم برمجة السيرفر باستخدام Node.js و إطار عمل Express.js لبناء واجهة برمجة تطبيقات (RESTful API) قوية وسريعة الاستجابة. تم استخدام قاعدة بيانات SQLite لتخزين وإدارة البيانات (الرحلات، المستخدمين، الحجوزات) بشكل آمن ومنظم. 💡 ما يميز هذا العمل: التركيز على جودة الكود (Clean Code)، فصل الواجهة الأمامية عن الخلفية (Decoupled Architecture)، وتوفير تجربة مستخدم سريعة جداً خالية من أي بطء، مما يجعله نموذجاً مثالياً للشركات السياحية الحديثة.