Wanderly — مخطط رحلات اجتماعي
الرحلة كبيانات من الدرجة الأولى: مسارات متعددة المحطات تبنيها وتعيد ترتيبها وتشاركها — وتتصفحها على خريطة حية.
- النوع
- مشروع شخصي، حي
- الخريطة
- Mapbox GL — مسارات وترميز جغرافي
- الزمن الحقيقي
- Socket.IO + TanStack Query
الفكرة
خطط السفر تعيش في لقطات الشاشة والملاحظات وسلاسل الدردشة. يعامل Wanderly الرحلة كبيانات: محطات مرتبة بأماكن وتواريخ، مرسومة على خريطة حقيقية، وقابلة للمشاركة كمنشور يمكن لمسافرين آخرين تصفحه وإعادة استخدامه.
المشكلات المثيرة كانت تفاعلات الخريطة، والمسارات القابلة لإعادة الترتيب، والتحديثات اللحظية — الأجزاء التي لا تلمسها معظم تطبيقات CRUD أبداً.
ما بداخله
الأجزاء التي تطلبت هندسة فعلية:
منشئ رحلات متعدد المحطات
المحطات قابلة للسحب وإعادة الترتيب، تُرمَّز جغرافياً عبر Mapbox، وتُعرض كمسار على الخريطة أثناء التحرير.
مسارات المجتمع على خريطة حية
الرحلات المشتركة تُعرض كمسارات قابلة للتصفح — الخريطة هي الصفحة الرئيسية، لا زينة بجانبها.
مسارات بمساعدة Claude
صف الرحلة التي تريدها؛ فيصيغ Claude مسوّدة مسار يمكنك تحريرها محطة بمحطة — بدلاً من البدء من خريطة فارغة.
طبقة اجتماعية لحظية
المنشورات والتحديثات تنتشر عبر Socket.IO، مع حفاظ TanStack Query على الاتساق بين طبقة المقابس وذاكرة الواجهة.
لماذا يهم
كقطعة في ملف الأعمال، يُظهر اتساع المدى:
- واجهة خريطة غير بديهية — رسم وترميز جغرافي وعرض مسارات، أبعد بكثير من دبوس على خريطة.
- حالة لحظية تبقى متسقة بين طبقة المقابس وذاكرة الاستعلامات.
- حزمة حديثة من طرف إلى طرف: Next.js 16 وReact 19 وi18n والسمات ونماذج بتحقق Zod.
التقنيات
Next.js 16 وReact 19، وMapbox GL، وSocket.IO، وTanStack Query، وZustand وZod. مشروع شخصي — حي للتجربة من البطاقة.
هل يبدو هذا مألوفاً من تطبيقك؟
كل عمل هنا بدأ بالطريقة نفسها: تطبيق يعمل بالفعل، ومشكلة قرر أحدهم التوقف عن التعايش معها. الفحص هو الطريقة منخفضة المخاطر للبدء — وصول للقراءة فقط، تقرير مكتوب، وقائمة إصلاحات مرتبة حسب الأولوية.