SocialApp

عنوان المشروع: SocialApp – تطبيق تواصل اجتماعي تفاعلي (مشروع تدريبي).

وصف العمل:

SocialApp هو تطبيق ويب تفاعلي يحاكي تجربة استخدام منصات التواصل الاجتماعي المعروفة، تم تطويره كـ"مشروع تدريبي" بهدف عرض وتطبيق المهارات في تطوير واجهات المستخدم باستخدام Angular. يتيح التطبيق للمستخدمين التفاعل ومشاركة المحتوى بطريقة سهلة وجذابة، مع التركيز على بناء واجهة مستخدم ديناميكية وسلسة.

أبرز مميزات التطبيق:

1- الصفحة الرئيسية (Timeline): صفحة رئيسية تعرض ال posts من ال users بشكل متسلسل ومستمر، شبيهة بالـ News Feed في Facebook.

2- إنشاء المنشورات بسهولة (New post): عند الضغط على مربع مخصص (يشبه مربع البحث)، تظهر نافذة منبثقة (Popover/Modal) تتيح للمستخدم كتابة نص المنشور وتحميل الصور، مع دعم خاصية السحب والإفلات (Drag & Drop) أو اختيار الملفات من الجهاز مباشرة.

3- صفحات الملف الشخصي (Profile Page): عند الضغط على صورة أو اسم صاحب المنشور، يتم توجيه المستخدم مباشرة إلى صفحة الملف الشخصي الخاصة به لعرض تفاصيله ونشاطاته ومنشوراته.

4- نظام تسجيل الدخول (Authentication): يوفر آلية آمنة للمستخدمين لإنشاء حسابات جديدة أو تسجيل الدخول إلى حساباتهم الحالية.

5- نظام التعليقات (comments): يمكن للمستخدمين إضافة تعليقات على أي منشور، وكذلك استعراض جميع التعليقات الموجودة عليه، مما يعزز التفاعل داخل التطبيق.

6- تصميم متجاوب (Responsive): واجهة مستخدم مرنة تتكيف تلقائيًا مع مختلف أحجام الشاشات، تم بناؤها باستخدام مبدأ "Mobile First" لضمان أفضل تجربة عرض على الهواتف الذكية أولاً ثم التكيف مع الشاشات الأكبر (الأجهزة اللوحية والحواسيب المكتبية).

التقنيات المستخدمة:

Angular 19: لبناء الواجهة الأمامية بطريقة قوية وحديثة.

Angular Universal (SSR): لعرض الصفحات بشكل أسرع وتحسين ظهور الموقع في محركات البحث SEO .

RxJS: لتقديم بحث لحظي سريع وسلس..

Reactive Forms: لنماذج إدخال بيانات ذكية مع تحقق داخلي (Validation).

Ng-Bootstrap: مكتبة مكونات واجهة مستخدم جاهزة مبنية على Bootstrap ومُحسّنة للعمل مع Angular، لتسريع عملية التطوير وضمان تصميم متناسق وجذاب.

TypeScript: لغة البرمجة الأساسية المستخدمة مع Angular، لضمان كتابة كود قوي ومنظم وسهل الصيانة.

ngx-skeleton-loader: لعرض تأثير تحميل مؤقت أثناء جلب البيانات.

ngx-toastr: لإظهار إشعارات فورية عند تنفيذ العمليات.

روابط المشروع:

الكود المصدري على GitHub: https://github.com/Mena-E...

تجربة مباشرة (Demo): https://social-app-dusky-...

الهدف من المشروع:

تطبيق عملي للمفاهيم والتقنيات المتقدمة في تطوير تطبيقات الويب التفاعلية باستخدام Angular.

إظهار القدرة على بناء واجهة مستخدم معقدة نسبياً تحاكي الوظائف الأساسية لتطبيقات التواصل الاجتماعي الشهيرة.

يعتبر هذا المشروع إضافة قيمة لمعرض الأعمال (Portfolio) كنموذج لمشروع تدريبي متكامل يعكس مستوى المهارة في تطوير الواجهات الأمامية.