Focus Social Platform

التحدي:

تطوير منصة Social Media خفيفة وسريعة تعمل في الوقت الفعلي (Real-time)، وتوفّر تحديثات فورية (instant updates)، وتمريراً لا نهائياً (infinite scrolling)، إلى جانب الخصائص الأساسية مثل Follow / Like / Comment — مع واجهة أمامية مضغوطة يمكن نشرها على GitHub Pages دون الحاجة إلى خادم خلفي مخصص (custom backend server).

الحل الذي قدّمته:

قمت بتصميم تطبيق أحادي الصفحة (Single-Page Application) باستخدام React بالاعتماد على Firebase كخدمة خلفية (Backend-as-a-Service) لتقديم تفاعلات اجتماعية فورية تشمل تحديثات لحظية في الـ feed، وتمريراً لا نهائياً للمنشورات، واستجابات أقل من ثانية لجميع تفاعلات المستخدمين.

الخصائص الرئيسية التي طوّرتها:

تحديثات لحظية للـ feed باستخدام Firestore snapshots لمزامنة الإعجابات والتعليقات والمتابعات فوراً

تمرير لا نهائي (Infinite Scroll) باستخدام استعلامات فعّالة في Firestore مع limit + startAfter cursors

تحديثات مباشرة للملف الشخصي مع عدّ المتابعين في الوقت الفعلي وتدفق النشاطات (activity streams)

ميزة بحث محسّنة (Debounced Search) لتقليل قراءات قاعدة البيانات غير الضرورية

نظام رفع وتخزين الصور مدمج مع Firebase Storage

بنية معيارية قائمة على الميزات (Feature-based Modular Architecture) لتسريع التطوير وإضافة الخصائص

خط نشر (Deployment Pipeline) إلى GitHub Pages لإطلاق الإصدارات فوراً

توجيه (Routing) على جانب العميل باستخدام HashRouter لضمان التوافق مع الاستضافة الثابتة

Tech Stack / التكنولوجيا المستخدمة:

• Frontend: React 18، مكوّنات وظيفية (Functional Components) باستخدام Hooks وHashRouter

• Backend-as-a-Service: Firebase Auth، Firestore، Firebase Storage

• Real-Time Data: مزامنة مباشرة عبر Firestore onSnapshot بين جميع العملاء

• State Management: حالة محلية لكل مكوّن مع طبقة مساعدة (Helper Module) للفصل المنطقي

• Optimization: بحث مؤجل التنفيذ (Debounced Search)، ترقيم صفحات (Pagination Cursors) واستعلامات محسّنة

• Deployment: خط CI/CD آلي للنشر الفوري عبر GitHub Pages

النتائج القابلة للقياس:

→ تحديثات فورية في أقل من ثانية لجميع التفاعلات الاجتماعية

→ تقليل حجم تحميل الصفحة الأولى بنسبة 90% عبر تمرير 6 منشورات فقط في البداية

→ خفض عدد استعلامات البحث بنسبة 80% من خلال Debouncing

→ نشر فوري للإصدارات عبر GitHub Pages باستخدام CI/CD Automation

→ تكلفة خوادم معدومة بفضل اعتماد Firebase BaaS

→ إمكانية تطوير الخصائص بشكل مستقل بفضل البنية المعيارية (feature isolation)

التعقيد التقني

تطلّب المشروع معالجة تحديات متعلقة بمزامنة الحالة في الوقت الفعلي بين المستخدمين، وتصميم استراتيجيات فعّالة للتمرير والتقسيم (pagination)، وإدارة تدفقات المصادقة في Firebase Auth، وبناء شبكة اجتماعية (Social Graph) قابلة للتوسع دون خادم خلفي مخصص.

يوازن النظام بين تكلفة قراءات Firebase وتجربة المستخدم من خلال تحسين الاستعلامات الذكية (intelligent query optimization).

المهارات التي يُظهرها المشروع

إتقان React Development، وهندسة Firebase BaaS، ومزامنة البيانات في الوقت الفعلي (Real-Time Data Synchronization)، وإدارة الحالة على جانب العميل (Client-Side State Management)، وتحسين الأداء (Performance Optimization)، وإنشاء خطوط نشر سريعة (Deployment Pipelines).