Quick Summary
Amr Samir, Full Stack Developer & Technical Architect, built this project using نكست جي إس, ريأكت, تايلويند سي إس إس, تايب سكريبت, زوستاند. It demonstrates professional-grade implementation of الواجهة with a focus on performance and scalability.
الفئةالواجهة
ماذا يوضح هذا المشروع
المهارات المستخدمة:
المواصفات التقنية
- Project Type: الواجهة
- Primary Stack: نكست جي إس, ريأكت, تايلويند سي إس إس
- Deployment: سيرفر خاص مؤمن (VPS)
- Architecture: بنية حديثة متكاملة
القيم الأساسية
Delivering scalable, high-performance solutions with a focus on user experience and business growth.
استفسار سريع عن المشروع
أرسل استفسارك مباشرة من صفحة المشروع دون الانتقال إلى صفحة التوظيف.
نظرة عامة على المشروع
نظرة عامة على المشروع
الفئة: الواجهة
Book & Go World - منظومة العمليات واستكشاف باقات السفر
المشكلة والهدف
تعتمد باقات السفر على تسعير متغير يشمل تذاكر الطيران، ودرجات الإقامة، والجولات السياحية الإضافية، وأسعار العملات. يحتاج العملاء وموظفو المبيعات إلى واجهة سريعة تتيح تخصيص الرحلة وحساب التكلفة الإجمالية فورًا بدون بطء في تحميل الصفحة.
تم بناء Book & Go World لشركة Book & Go Egypt كمنصة لعرض برامج السفر وإدارة جداول التسعير التفاعلية، مع دمج العرض السريع على الخادم (SSR) مع إدارة حالة الجداول عبر Zustand و Immer.
المعمارية البرمجية والمكونات التقنية
1. إدارة الجداول التفاعلية عبر Zustand و Immer
تحتوي شاشات التسعير على جداول متعددة البنود (طيران، انتقالات، رحلات اختيارية، ترقية الغرف):
- محددات الحالة في Zustand: استخدام Zustand بدلاً من Redux لتفادي التعقيد الزائد، مع عزل إعادة تصيير الخلايا بحيث لا تؤدي كتابة رقم في خلية واحدة إلى إعادة تصيير الجدول بأكمله.
- التحديث غير القابل للتعديل عبر Immer: تعديل البيانات المتداخلة بأمان وسلاسة لضمان استقرار حالة الحجز.
2. معمارية Next.js App Router
- عرض صفحات الوجهات السياحية والباقات على الخادم لتحسين سرعة الظهور الأول ومحركات البحث.
- عزل مكونات اختيار التواريخ وتخصيص الباقات في واجهات تفاعلية من طرف العميل (Client Components).
3. التدويل الكامل باللغتين العربية والإنجليزية (next-intl)
- دعم كامل لتغيير الاتجاه (RTL للعربية و LTR للإنجليزية) مع ضبط الخطوط والمسافات بما يناسب طبيعة كل لغة.
القرارات الهندسية
- اختيار Zustand: تقليل التعقيد البرمجي وضمان سرعة استجابة فورية عند تعديل بنود الرحلة وتكاليفها.
- الحساب الفوري للتكاليف: إجراء الحسابات فورًا في المتصفح لمنح المستخدم تجربة تفاعلية سلسة، مع إعادة التحقق من السعر في الخادم عند إتمام الطلب.
المراجع والروابط
- التقنيات: NENext.js, REReact, ZUZustand, TATailwind Css