Arab Tourism Platform – منصة المعالم السياحية العربية
دليل سياحي عربي أولًا بصفحات دول ومعالم + خريطة SVG تفاعلية + ثيمات لكل دولة، جاهز للتصدير كـ Static (Next.js Export).
Arab Tourism Platform هي منصة دليل سياحي عربية أولًا مبنية باستخدام Next.js (App Router) وReact وTailwind CSS. توفر تجربة تصفح دولة → معالم، وخريطة SVG تفاعلية للوطن العربي (d3-geo + topojson-client + world-atlas)، وصفحات معالم غنية تحتوي على سرد عربي طويل، مصادر، إحداثيات، واقتراحات بحث عن الصور. المشروع مُجهّز للتصدير كـ Static بالكامل (ينتج مجلد /out) ويمكن رفعه على استضافات Shared مثل InfinityFree بدون أي Backend، حيث يتم الاعتماد على بيانات محلية JSON/CSV تُحوّل إلى صفحات ثابتة.
الدور
تنفيذ الواجهات وتجربة المستخدم، بناء نظام مكوّنات، إعداد صفحات Static، دمج خريطة SVG، بناء نظام الثيمات، وتجهيز أدوات بيانات JSON/CSV.
التركيز
بنية Static سريعة وخفيفة، واجهة Responsive نظيفة، صفحات قابلة للتوسع بالاعتماد على Dataset محلي، وتحسين تجربة الخريطة على الموبايل (tap/hover/focus).
أبرز النقاط
واجهة عربية أولًا، دليل دول → معالم، خريطة SVG تفاعلية (d3-geo/topojson)، ثيم لكل دولة عبر CSS Variables، وصفحات معالم غنية (سرد + مصادر + إحداثيات). تصدير Static كامل إلى /out لرفع المشروع على استضافات Shared.
دراسة حالة
المشكلة والقيود
مواقع الأدلة السياحية تصبح ثقيلة عندما تعتمد على باك إند لكل صفحة. كان المطلوب موقع سياحي سريع يعمل على استضافات Shared بدون باك إند.
الحل والقرارات
تم بناء بنية Static Export: صفحات تولَّد من Dataset (دول/معالم) + خريطة SVG تفاعلية + صفحات معالم غنية بسرد ومصادر وإحداثيات.
النتيجة والنتائج
تصفح سريع ونشر سهل على الاستضافات المشتركة وبنية قابلة للتوسع لإضافة معالم جديدة بدون تعقيد باك إند.
الدور
UI/UX + مسارات Static + دمج الخريطة + أدوات البيانات.
التقنيات
Next.js export • d3-geo • topojson • Tailwind
خطوات التنفيذ
- تصميم تدفق دولة → معالم
- بناء خريطة SVG تفاعلية ونظام ثيمات
- توليد صفحات ثابتة من JSON/CSV
- إنشاء بنية صفحة المعلم (حقائق/مصادر)
- تجهيز التصدير والنشر على الاستضافة
شرح يساعد على SEO
هذا المشروع يوضح قيمة موقع سياحي بشكل عملي: صفحة واضحة، أقسام مرتبة، ورسالة سهلة الفهم للمستخدم.
في "Arab Tourism Platform – منصة المعالم السياحية العربية" تم التعامل مع موقع سياحي كهدف تجاري: تقليل التشتت وزيادة وضوح القرار من أول شاشة.
محتوى دراسة الحالة هنا ليس زخرفة؛ كل جزء (المشكلة/الحل/النتيجة) يخدم موقع سياحي ويجعل الصفحة قابلة للفهرسة بوضوح.
اقرأ المزيد
الصور داخل المشروع ليست للعرض فقط؛ كل صورة لها alt مرتبط بـ موقع سياحي لرفع الفهم والسياق داخل نتائج البحث.
من ناحية التنفيذ، تم الاعتماد على Next.js (App Router) • React • Tailwind CSS • Static Export (output: 'export') • d3-geo • topojson-client • world-atlas • Local JSON/CSV Dataset مع مراعاة أداء الموبايل وتجربة المستخدم، لأن موقع سياحي لا ينجح مع صفحات ثقيلة.
وجود خطوات تنفيذ وFAQ يضيف قيمة ويجعل موقع سياحي صفحة قوية بدلًا من صفحة قصيرة.
أسئلة شائعة
لماذا Static Export؟
لأنه يلغي تكلفة الباك إند ويجعل الصفحات سريعة على الاستضافات المشتركة.
هل الخريطة مناسبة للموبايل؟
نعم. تم ضبط التفاعل للمس والضغط وليس hover فقط.
هل إضافة معالم جديدة سهلة؟
نعم. بإضافة البيانات ثم إعادة البناء يتم توليد الصفحات تلقائيًا.