Tournista Travel — موقع رحلات React + Supabase بلغتين ولوحة إدارة منفصلة

مواقع شركات • tournistatravel.online

tournistatravel.online

Tournista Travel — موقع رحلات React + Supabase بلغتين ولوحة إدارة منفصلة — 1

Tournista Travel — موقع رحلات React + Supabase بلغتين ولوحة إدارة منفصلة — 2

Tournista Travel — موقع رحلات React + Supabase بلغتين ولوحة إدارة منفصلة — 3

Tournista Travel — موقع رحلات React + Supabase بلغتين ولوحة إدارة منفصلة — 4

Tournista Travel — موقع رحلات React + Supabase بلغتين ولوحة إدارة منفصلة — 5

Tournista Travel — موقع رحلات React + Supabase بلغتين ولوحة إدارة منفصلة — 6

1 / 6

نبذة عن المشروع

موقع لشركة جولات خاصة وانتقالات سياحية في مصر، مبني React SPA بـ TypeScript و Vite، والبيانات على Supabase، ومتاح بالإنجليزي والألماني. فيه جولات بفلترة وتقسيم صفحات، وتقييمات عملاء برفع صور، وطقس للوجهة، وفورم حجز بيحوّل لواتساب — ومعاه لوحة إدارة React منفصلة على subdomain محمية بـ Supabase Auth و Row Level Security.

2لغة (EN / DE)

599مفتاح ترجمة

7صفحة (Lazy-loaded)

2Storage bucket

4Supabase migration

6,956سطر TypeScript

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

Frontend

React 18TypeScript 5Vite 6 (SWC)React RouterTailwindSwiperEmblareact-helmet-async

Backend

Supabase (PostgreSQLAuthStorageRow Level SecurityRPC)

Dashboard

React 18TypeScriptVite 5shadcn/ui (Radix)TanStack Queryreact-hook-form + zoddnd-kitRecharts

Integrations

WhatsApp bookingOpenWeatherMapMeteomaticsElfsight reviews

Hosting & DevOps

Hostinger (LiteSpeed)SPA fallbackCSP headers

الموقع

7 صفحات lazy-loaded: الرئيسية، من نحن، الخدمات، الجولات، تفاصيل الجولة، الانتقالات، التواصل.
لغتين EN / DE بـ 599 مفتاح ترجمة، ومحتوى الجولات نفسه متعدد اللغات من قاعدة البيانات.
الجولات: فلترة بالوجهة (القاهرة، الأقصر، الغردقة، البحر الأحمر، أسوان، رحلات متعددة الأيام) من الرابط مع تقسيم صفحات.
تفاصيل الجولة: نظرة عامة، أبرز النقاط، المشمول، المدة، حجم المجموعة، معرض صور بـ Lightbox، وجولات مرتبطة.
التقييمات: متوسط وعدد، وإضافة تقييم بالاسم والدولة والنجوم ورفع صور متعددة لـ Supabase Storage.
فورم حجز بالدولة وكود الهاتف وعدد المسافرين والتاريخ مع تحقق ومودال تأكيد، والطلب بيروح واتساب.
الطقس: توقعات OpenWeatherMap مع نصيحة لبس مترجمة.
سيو: Helmet لكل صفحة، JSON-LD، و Open Graph.

لوحة الإدارة (dashboard.tournistatravel.online)

دخول بـ Supabase Auth وصلاحية أدمن عبر RPC.
إدارة الجولات بتبويبات للغتين ورفع صورة رئيسية ومعرض.
قوائم ديناميكية بالسحب والإفلات للمميزات والمشمول.

المعمارية والأمان

Custom hooks لطبقة البيانات (useTours, useReviews, useTourRating) و Context للترجمة، و code-splitting لكل صفحة.
Row Level Security على الجداول، والإضافة والتعديل والحذف للأدمن بس عبر is_admin().
Migrations بتطوّر الـ schema من نص لـ JSON متعدد اللغات من غير ما الجدول يتكسر.