السياق
لقاء25 منصة مجتمع مهني للمملكة العربية السعودية — تقدّم تجربة عربية أصيلة لا مجرد واجهة مترجمة. الجمهور هو خريجو ومنتسبو شبكة مهنية متخصصة، يتوقعون منتجاً عربياً بالدرجة الأولى مع دعم ثنائي اللغة (AR/EN).
المشكلة
التوتر الهندسي الجوهري: بناء منصة إنتاجية عربية-أولاً بسيو ديناميكي، ومصادقة متعددة الاستراتيجيات، وصلاحيات قائمة على الأدوار — في إطار زمني ضيق، بفريق من ثلاثة، مع بناء الخلفية الكاملة في الوقت ذاته.
الرهانات التقنية التي كان يجب أن تكون صحيحة من البداية:
- بنية التوجيه وi18n — i18next مع App Router في Next.js، مسارات مبوّبة بالـ locale، تحميل الترجمات من جهة الخادم.
- استراتيجية المصادقة — ثلاثة تدفقات منفصلة: LinkedIn OAuth للمهنيين، OTP للجوال، magic links للبريد الإلكتروني. مصادقة Supabase متعددة الاستراتيجيات مع session موحّد.
- BFF مقابل وصول مباشر من العميل — Route Handlers كـ BFF تحافظ على منطق المصادقة من جهة الخادم وتمنع تسريب مفاتيح الخدمة.
البنية المعمارية
طبقة BFF كانت خياراً مقصوداً بدلاً من الوصول المباشر عبر Supabase JS من العميل. مع سياسات RLS كحد أمني، تتيح Route Handlers:
- الاحتفاظ بمفتاح service-role من جهة الخادم فقط، دون إرساله للمتصفح
- تجميع استعلامات Supabase المتعددة في رحلة HTTP واحدة
- تطبيق التحقق الخاص بالنطاق وحدود المعدل قبل الوصول إلى قاعدة البيانات
التنفيذ
مخطط PostgreSQL وRLS
المخطط يحتوي على أكثر من 10 جداول مع سياسات Row Level Security تفرض RBAC على مستوى قاعدة البيانات. مثال على سياسة جدول members:
-- يمكن للأعضاء قراءة ملفاتهم الشخصية وملفات الأعضاء المعتمدين
create policy "members_select" on members
for select using (
auth.uid() = user_id
or (status = 'approved' and auth.uid() in (
select user_id from members where status = 'approved'
))
);RTL / i18n
i18next مع i18next-resources-to-backend لتحميل الترجمات من جهة الخادم. اللغة ar أو en مُبوّبة في الرابط. سمة dir تُضبط على <html> في مستوى الـ layout. إحدى المشكلات غير المتوقعة: تنسيق الأرقام العربية في سلاسل التواريخ — حُلّت باستخدام Intl.DateTimeFormat مع خاصية locale بدلاً من مُنسِّق مخصص.
SEO الديناميكي
مخططات JSON-LD لـ Event وPerson لكل صفحة. صور OG تُولَّد عبر @vercel/og مع تحميل IBM Plex Sans Arabic كـ font buffer. Sitemap تلقائي عبر metadata route في Next.js.
النتيجة
- أكثر من 30 صفحة حية عبر ثلاث personas (مدير، عضو، خريج) تشمل الفعاليات والدليل والأعضاء والمقالات والتقارير وطلبات التعارف والإشراف وسير عمل الطلبات/الشركات والرعاة والنشرة البريدية ومكتبة المحتوى
- أكثر من 70 Route Handler تغطي المصادقة (LinkedIn / OTP / magic link)، إدارة الملفات والدليل، الفعاليات والتسجيلات، المقالات، التقارير، الرعاة، طلبات التعارف، الإشراف، إدارة المستخدمين والأدوار والشركات، وإعدادات تطبيق المسؤول
- RTL عربي-أولاً مراجعة من قِبَل ناطقين أصليين ومنشور في الإنتاج
- SEO ديناميكي مُفهرَس؛ صور OG تعمل بشكل صحيح بالعربية عند المشاركة على LinkedIn
- واجهة API داخلية مصممة لإعادة الاستخدام عبر منتجات أخرى في نفس عائلة المنتجات