Connect - Social Media Web App
تفاصيل العمل
Connect – تطبيق تواصل اجتماعي متكامل باستخدام Angular وFirebase
Connect هو تطبيق ويب تفاعلي لتواصل اجتماعي تم تصميمه وتطويره بالكامل باستخدام Angular وFirebase. يتيح للمستخدمين إنشاء منشورات، التفاعل معها بالإعجاب أو التعليق، إرسال واستقبال طلبات الصداقة، إجراء محادثات مباشرة، إدارة ملفاتهم الشخصية، واستقبال الإشعارات— ضمن تجربة سلسة تعتمد على نموذج الصفحة الواحدة (SPA).
تم تنفيذ التصميم والبرمجة من الصفر بالكامل، دون الاعتماد على أي قالب جاهز.
الخصائص الرئيسية:
تسجيل دخول وتسجيل حساب باستخدام Firebase Authentication
حماية المسارات والتحقق من صحة النماذج
إنشاء منشورات مع دعم رفع الصور عبر Cloudinary
️ إمكانية الإعجاب والتعليق على المنشورات
إرسال واستقبال طلبات الصداقة
شات مباشر بين الأصدقاء
إشعارات فورية للتفاعلات وطلبات الصداقة
? عرض وتعديل الملف الشخصي
عرض مختصر مع خاصية "قراءة المزيد" للمنشورات الطويلة
نظام تنبيهات (Toast system)
تصميم متجاوب يعمل بكفاءة على جميع الأجهزة
️ التقنيات المستخدمة:
Frontend: Angular v19.2.13، Angular Material، Bootstrap v5.3.6
إدارة الحالة: NgRx في بعض الأجزاء، Angular Signals وZone.js الافتراضي في معظم الأجزاء
النماذج: Template-Driven & Reactive Forms
Backend: Firebase (Authentication, Cloud Firestore, Hosting)
تخزين الصور: Cloudinary
الأداء: Lazy Loading، واستخدام OnPush Change Detection لبعض المكونات
تحسين تجربة المستخدم: حراس المسارات (Routing Protection)، عرض المحتوى الديناميكي (Content Projection)، واستخدام lifecycle hooks
رابط المشروع على GitHub:
رابط مباشر لتجربة التطبيق: