ما هو تريب نيست؟
TripNest عبارة عن منصة ويب احترافية قمنا بتطويرها من الصفر لصناعة السفر والجولات. مشروع؛ فهو يجمع الاحتياجات الأساسية مثل قائمة الرحلات والترويج للوجهة والحجز عبر الإنترنت وإدارة المدونة تحت سقف واحد.
دعم اللغة المزدوجة وإدارة المحتوى
توفر المنصة الخدمات باللغتين التركية والإنجليزية. تحدث تبديلات اللغة فورًا عبر بنية سياق React، دون إعادة تحميل الصفحة. يمكن تحرير كل محتوى النص - العناوين والأوصاف ونصوص الأزرار - من لوحة الإدارة. وبهذه الطريقة، يمكن لمالك الموقع تحديث محتواه دون الحاجة إلى أي معرفة بالأكواد.
مكونات المنزل
تتكون الصفحة الرئيسية من 13 قسمًا مختلفًا، يتم تغذية كل منها ديناميكيًا من قاعدة البيانات:
- بانر رئيسي مع خلفية فيديو بملء الشاشة
- جولة في شريط البحث حسب الموقع والتاريخ وعدد الأشخاص
- الوجهات الشهيرة وتذاكر الجولات السياحية المميزة
- ترويج الخدمة ومراجعات العملاء وشعارات الشركاء
- عدادات الإنجاز (الجائزة، المسافر السعيد، سنوات الخبرة)
- دليل الحجز خطوة بخطوة وقسم المدونة
تحتوي جميع المكونات على رسوم متحركة غنية بمكتبات GSAP وSwiper.
نظام الرحلات والوجهات
يحتوي الموقع على صفحة تفاصيل منفصلة لكل جولة. تتضمن هذه الصفحات وصف الجولة ومعلومات الأسعار والمدة والنتيجة والمعرض المرئي ومعلومات مماثلة. يتم عرض الأسعار تلقائيًا بالليرة التركية أو الدولار الأمريكي حسب تفضيل اللغة. الصفحات الوجهة لها بنية مماثلة؛ تحتوي كل وجهة على صفحتها الترويجية ومرئياتها الخاصة. تتم إدارة كل هذا المحتوى من خلال منصة TripNest.
البنية الأساسية للحجز عبر الإنترنت
تتضمن صفحات تفاصيل الجولة نموذج حجز متعدد الخطوات. يقوم المستخدم باختيار التاريخ وتحديد عدد الأشخاص وإدخال الاسم واللقب ورقم معرف TR ومعلومات الهاتف والعنوان لكل راكب. تتم إضافة نماذج الركاب تلقائيًا عند زيادة عدد الأشخاص. يدعم النموذج طرق الدفع مثل بطاقة الائتمان أو التحويل البنكي. تتم مراقبة طلبات الحجز الواردة ويمكن إجراء تحديثات الحالة من لوحة الإدارة.
بحث وتصفية متقدم
شريط البحث في الصفحة الرئيسية؛ إنه يعمل مع معلمات الموقع والفئة والتاريخ وعدد الأشخاص. بفضل مكون تقويم Flatpickr، يتم تحديد التاريخ من خلال واجهة سهلة الاستخدام. تتم تصفية نتائج البحث عبر معلمات URL في صفحة قائمة الجولة ويتم عرض عدد النتائج للمستخدم.
وحدة المدونة والمحتوى
يتيح نظام المدونات المتكامل نشر أدلة السفر والمقالات الإعلامية. يتم إنشاء كل مشاركة مدونة بعنوان ثنائي اللغة ومحتوى ومعلومات المؤلف وصورة الغلاف. يتم دعم تنسيق النص المنسق في صفحات تفاصيل المدونة. تعمل هذه الوحدة على زيادة التفاعل في الموقع وتساهم في زيادة حركة المرور العضوية من حيث تحسين محركات البحث.
لوحة الإدارة
تحتوي لوحة الإدارة، وهي أحد الأجزاء الأكثر شمولاً في المشروع، على 28 صفحة إدارة مختلفة. الوحدات التي يمكن إدارتها عبر اللوحة هي:
- إضافة وتعديل وحذف الجولات وتغيير الحالة
- إدارة الوجهة وتحميل الصور
- محرر محتوى المدونة
- قائمة وتتبع حالة الحجوزات الواردة
- إدارة مراجعات العملاء والخدمات وشعارات الشركاء
- عدادات الإنجاز ومحرر قسم "لماذا تختارنا"
- إعدادات الموقع: الشعار، معلومات الاتصال، روابط وسائل التواصل الاجتماعي، نص التذييل
- إعدادات الدفع وإدارة المستخدم
- تحرير بنية القائمة
البنية التحتية التقنية
تم استخدام React 19 وVite في الواجهة الأمامية. Vite هي أداة حديثة توفر تجميعًا سريعًا وتحديثات فورية أثناء عملية التطوير. تتم إدارة النمط باستخدام Tailwind CSS؛ تتم إدارة أكثر من 12 رسمًا متحركًا مخصصًا ولوحات ألوان مخصصة وتعريفات طباعة مخصصة مركزيًا في ملف تكوين Tailwind. تتم إدارة انتقالات الصفحة باستخدام React Router v7 ويكون التطبيق بأكمله في بنية تطبيق الصفحة الواحدة (SPA).
تحتوي الواجهة الخلفية على 65 نقطة نهاية REST API تم تطويرها باستخدام PHP. تتواصل نقاط النهاية هذه مع قاعدة بيانات MySQL وتنفذ عمليات CRUD (إنشاء البيانات وقراءتها وتحديثها وحذفها). تتضمن قاعدة البيانات 11 جدولًا مختلفًا: الجولات والوجهات والمدونات والخدمات ومراجعات العملاء والشركاء وبيانات النجاح ومصطلحات البحث الشائعة ومحتويات الأقسام وإعدادات الموقع والمستخدمين.
التصميم وتجربة المستخدم
تم استخدام خطوط Kaushan Script وAfacad وFigtree من عائلة Google Fonts في التصميم. تتكون لوحة الألوان من درجات اللون الفيروزي الداكن والأخضر النابض بالحياة والعنبر، بما يتماشى مع موضوع السفر. تم تصميم موقع TripNest بشكل مستجيب للعمل بسلاسة على جميع الأجهزة. التفاصيل مثل تأثير المؤشر المخصص وزر التمرير إلى الأعلى وقائمة الهاتف المحمول خارج اللوحة وشاشة التحميل تكمل تجربة المستخدم.
لفحص النسخة المباشرة للمشروع وتجربة كافة الميزات
يمكن أن يجذب اهتمامك
