Web Apps
Social App | منصة التواصل الاجتماعي
منصة تواصل اجتماعي حديثة وتفاعلية بنظام منشورات وتعليقات ومصادقة متكاملة
نظرة عامة
منصة Social App هي تطبيق تواصل اجتماعي متطور وسريع الاستجابة تم بناؤه باستخدام React 19 و TypeScript 6 و Vite 8 و Tailwind CSS v4 و TanStack React Query v5. صُمم التطبيق ليقدم تجربة تفاعلية سلسة على كافة الأجهزة. تتضمن الميزات الأساسية: 1. **نظام المصادقة وحماية المسارات:** دورة تسجيل دخول وإنشاء حساب متكاملة تعتمد على رموز JWT، مع حراس مسارات أمنية (ProtectedRoute) لمنع الوصول غير المصرح به. 2. **خلاصة المنشورات التفاعلية:** إدارة كاملة للمنشورات مع دعم رفع الصور والمعاينة المباشرة، ومنتقي إيموجي سريع، وتحديث فوري للواجهة عبر إبطال الكاش. 3. **نظام التعليقات والتفاعل:** إضافة وتعديل وحذف التعليقات مع عرض أبرز تعليق على بطاقة المنشور مباشرة، وحماية ملكية التعليق للكاتب فقط. 4. **الملف الشخصي واختيار الأفاتار:** صفحة ملف شخصي تعرض بيانات المستخدم، مع تبويب لمنشورات المستخدم الخاصة ومحدد صور رمزية مخصص. 5. **مركز الإشعارات:** خلاصة للتفاعلات والإعجابات والتعليقات مع تمييز الإشعارات غير المقروءة بدقة. 6. **رصد انقطاع الاتصال (Offline Detection):** مراقبة حية لحالة الشبكة وإظهار شريط تنبيه أنيق فور انقطاع الإنترنت. 7. **مظهر ليلي وفاتح ذكي:** دعم كامل للوضعين الداكن والفاتح مع التعرف على تفضيلات النظام وحفظ الاختيار في التخزين المحلي.
أبرز المزايا
بُني باستخدام
لمحة عن البنية التقنية
معمارية React 19 و TypeScript 6
مبني بأحدث إصدارات React 19 و TypeScript 6 الصارم و Vite 8 لتحقيق أقصى سرعة تطوير وبناء إنتاجي.
إدارة بيانات الخادم عبر React Query v5
تحديثات متفائلة واسترجاع تلقائي في الخلفية وإبطال ذكي للكاش فور إضافة أو تعديل المنشورات.
محرك التصميم Tailwind CSS v4
محرك متغيرات CSS يدعم الانتقال السلس والفوري بين الوضعين الداكن والفاتح بدون أي وميض.
التحقق بـ Zod واعتراض طلبات Axios
تحقق فوري من مدخلات النماذج عبر Zod مع حواقن Axios لإدارة التوكن ومعالجة أخطاء الشبكة.
التحدي
بناء منصة تواصل اجتماعي سريعة يتطلب معالجة تأخير استجابة الخادم، وإدارة العمليات المعقدة للمنشورات والتعليقات، والتحكم بحالات المصادقة المختلفة، وتوفير استجابة فورية للواجهة بدون إعادة تحميل الصفحة.
النهج المتبع
قمت بهندسة التطبيق باستخدام React 19 و TanStack React Query v5 لفصل إدارة الكاش السحابي عن حالة التطبيق، مع تطبيق تحقق صارم عبر Zod لجميع النماذج، وبناء واجهة متجاوبة بالكامل تدعم الوضعين الليلي والفاتح بـ Tailwind CSS v4.
النتائج
إطلاق تطبيق تواصل فائق السرعة يتميز بتنقل فوري، وخلو تام من أخطاء الـ TypeScript، وكشف لحظي لحالة الاتصال، وتجربة مستخدم سلسة على كافة الأجهزة.
معرض الصور
