شبكة اجتماعية عربية متكاملة — Next.js + WebSocket + MongoDB

لصالح: مشروع تجريبي شخصي (Side Project) — نُشر على Vercel

الهدف: بناء شبكة اجتماعية عربية متكاملة تجمع بين سهولة الاستخدام، الأمان العالي، والتجربة السلسة. تدعم اللغة العربية بالكامل مع RTL، وتستهدف المستخدمين العرب في التواصل وبناء المجتمعات الرقمية.

ما تم تنفيذه:

• نظام مصادقة كامل بـ JWT مزدوج (Access + Refresh Tokens) مخزنة في HttpOnly Cookies لمنع XSS

• ملف شخصي مع رفع صورة وبروفايل وغلاف مع معاينة فورية قبل الرفع

• نظام متابعة/إلغاء متابعة مع تحديث العدادات تلقائياً وإشعارات فورية

• منشورات نصية مع دعم رفع صور وفيديوهات متعددة وMarkdown بسيط

• 7 أنواع تفاعلات (لايك، حب، ضحك، حزن، غضب، مفاجأة، إعجاب) مع عدادات محدثة تلقائياً

• مشاركة المنشورات عبر نسخ الرابط أو إرسالها لمستخدم آخر عبر الرسائل الخاصة

• رسائل خاصة فورية عبر WebSocket مع إشعارات لحظية، حالة الكتابة، وإشعارات القراءة

• إشعارات فورية للمنشورات والرسائل والتفاعلات مع جرس ديناميكي وتحديد الكل كمقروء

• بحث ديناميكي عن مستخدمين مع debounce لتقليل الطلبات وإظهار حالة الاتصال

• روابط مباشرة للمنشورات /posts/[id] مع إعادة توجيه وتمرير تلقائي وتمييز highlight

• لوحة تحكم أدمن كاملة: إحصائيات، إدارة مستخدمين/منشورات/رسائل، تحليلات بيانية، مراقبة نظام

• مراقبة النظام: حالة الخدمات (DB, API, Socket.IO)، استخدام CPU/RAM/Disk، تنبيهات عند تجاوز الحدود

• إعدادات متقدمة للأدمن: أمان، إشعارات، خصوصية، مظهر، مع حفظ فوري

• صفحة إنشاء أول أدمن باستخدام بيانات super admin من ملف البيئة

• دعم RTL بالكامل في جميع الواجهات مع Tailwind CSS

• تصميم متجاوب يعمل على جميع الأجهزة

• معالجة مركزية للأخطاء لضمان استقرار الخادم

الأدوات والتقنيات:

الواجهة الأمامية: Next.js 15.2, React 19, TypeScript 5, Tailwind CSS, CSS Modules, Recharts, FontAwesome

الخلفية: Node.js 20, Express 5, MongoDB (Mongoose), Socket.io 4

الأمان: JWT (Access + Refresh), bcryptjs, Helmet.js, Rate Limiting, Data Sanitization, HttpOnly Cookies

الأدوات: Multer (رفع الملفات), date-fns (تواريخ عربية), Axios + Interceptors, ESLint + Prettier

التحديات التي واجهتها:

• تكامل WebSocket مع Next.js App Router — Next.js 15 يستخدم architecture مختلفة عن Pages Router. تطلب فهم deep لـ Socket.io adapter وإدارة الاتصال عبر reconnection تلقائي

• ضمان اتساق الإشعارات عبر WebSocket عند فصل الاتصال — أُضيف نظام reconnection مع exponential backoff وqueue للإشعارات المفقودة

• تصميم نظام JWT مزدوج (Access + Refresh) مع HttpOnly Cookies — التحدي كان في التوازن بين الأمان (منع XSS) وتجربة المستخدم (تجديد تلقائي). الحل: interceptor يتعامل مع 401 تلقائياً

• دعم RTL بالكامل في Tailwind مع الحفاظ على التصميم المتجاوب — تطلب إعادة هيكلة كل الـ utilities واستخدام logical properties

• إدارة حالة المستخدمين والمنشورات في localStorage مع استراتيجية تحديث ذكية — تجنباً لـ stale data، أُضيف timestamp validation مع re-fetch عند expiration

• تصميم لوحة تحكم أدمن مع رسوم بيانية تفاعلية — Recharts تتطلب SSR handling خاص في Next.js، حُل باستخدام dynamic imports

• مراقبة النظام في الوقت الفعلي — جمع metrics من Node.js process وعرضها في الـ frontend مع تحديث فوري

النتائج:

• منصة اجتماعية كاملة جاهزة للإنتاج مع بنية modular قابلة للتوسع

• دعم RTL بالكامل — من الواجهة إلى المحتوى

• أمان متعدد الطبقات: JWT + HttpOnly Cookies + Helmet + Rate Limiting + Sanitization

• تواصل فوري عبر WebSocket مع reconnection تلقائي

• لوحة تحكم أدمن شاملة مع تحليلات ومراقبة نظام

• المنصة منشورة على Vercel (frontend) والخلفية جاهزة للنشر على Render/Railway