تخطي إلى المحتوى
محمود.
العودة للمشاريع

SaaS

قبيلة

منصة اجتماعية عربية للمحترفين، ساهمت في تطوير الكثير من ميزاتها كالمطور الأساسي للواجهة الأمامية، بما في ذلك التوظيف، والملفات المهنية، والاشتراكات، والإشعارات، وتجربة الـ PWA، في منصة تجاوزت لاحقًا 52 ألف مستخدم.

قبيلة

التصنيف

الدور
مهندس واجهات أمامية
المدة
أغسطس 2024 – أكتوبر 2025
حجم الفريق
فريق متعدد التخصصات
السنة
2025
التقنيات
ReactNext.jsTypeScriptAuth.jsStripeFirebase Cloud Messaging

01

نظرة عامة

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

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

عملت على تطوير العديد من الميزات الأساسية، مثل نظام التوظيف، والملفات المهنية، والمجتمعات، والاشتراكات المدفوعة، والمصادقة، والإشعارات، وتجربة الـ Progressive Web App، إلى جانب تحسين بنية المشروع ورفع قابليته للتوسع والصيانة.

ساهم هذا العمل في استمرار تطور المنصة حتى تجاوز عدد مستخدميها لاحقًا 52 ألف مستخدم.

02

التحدي

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

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

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

03

دوري

خلال معظم فترة عملي، كنت المطور الأساسي للواجهة الأمامية، وتولّيت تطوير وصيانة الجزء الأكبر من ميزات المنصة، وشمل ذلك:

  • تطوير الكثير من الميزات الموجودة في المنصة اليوم وتحويلها إلى ميزات جاهزة للإنتاج.
  • صيانة وتحسين أجزاء كبيرة من قاعدة الكود الحالية.
  • تصميم وتنفيذ مكونات ووحدات Front-End قابلة لإعادة الاستخدام.
  • تطوير أنظمة المصادقة باستخدام OAuth (Google).
  • تطبيق نظام الصلاحيات (Role-Based Access Control).
  • دمج Stripe للاشتراكات والخدمات المدفوعة.
  • دمج Firebase Cloud Messaging للإشعارات الفورية.
  • تطوير وتحسين تجربة Progressive Web App (PWA).
  • التعاون المستمر مع فرق الـ Backend والـ Product لتصميم الـ APIs وتحويل المتطلبات إلى ميزات إنتاجية.
  • التواصل المباشر مع المستخدمين للمساعدة في تحليل المشكلات، والمشاركة في جلسات Debugging لفهم السيناريوهات الواقعية والوصول إلى حلول مناسبة.
  • تمثيل منصة قبيلة كمتحدث خلال إحدى الفعاليات الإلكترونية، حيث قدمت المنصة وأجبت عن استفسارات الحضور لعدة ساعات.

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

04

العملية

  1. 01

    فهم المنتج

    بدأت بفهم بنية المشروع الحالية، وآلية عمل المنصة، والتعرف على احتياجات المستخدمين وأولويات الفريق، حتى أتمكن من تطوير الميزات الجديدة دون التأثير على استقرار النظام.

  2. 02

    التخطيط

    قبل تنفيذ أي ميزة جديدة، كنت أراجع تأثيرها على بنية المشروع، وأحدد كيفية تقسيمها إلى مكونات ووحدات قابلة لإعادة الاستخدام، مع مراعاة سهولة الصيانة مستقبلًا.

  3. 03

    التطوير

    تم تطوير الكثير من الميزات باستخدام React وNext.js وTypeScript، مع التركيز على:

    • كتابة كود قابل للتوسع.
    • إعادة استخدام المكونات.
    • تنظيم المشروع بطريقة Feature-Based.
    • تحسين تجربة المستخدم.
    • الحفاظ على أداء المنصة أثناء إضافة ميزات جديدة.
  4. 04

    الاختبار

    قبل إطلاق أي ميزة، كنت أتحقق من:

    • سيناريوهات تسجيل الدخول والمصادقة.
    • حالات الاشتراكات المختلفة.
    • صلاحيات المستخدمين.
    • الإشعارات الفورية.
    • التوافق مع مختلف أحجام الشاشات والأجهزة.
    • معالجة المشكلات التي يتم اكتشافها من خلال المستخدمين أو فريق المنتج.
  5. 05

    الإطلاق

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

05

الميزات

الملفات المهنية

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

التوظيف

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

المجتمع المهني

عملت على تطوير عدد كبير من الميزات الاجتماعية التي تشجع على مشاركة المعرفة والتفاعل بين المستخدمين، مثل:

  • المجتمعات (Tribes).
  • المنشورات.
  • التفاعلات والتعليقات.
  • تحسين تجربة تصفح المحتوى.
  • سجل قراءة المنشورات (Read History).

المصادقة وإدارة الصلاحيات

طورت أنظمة المصادقة وإدارة الوصول لضمان تجربة آمنة وسلسة، وتشمل:

  • Google OAuth.
  • إدارة الصلاحيات باستخدام Role-Based Access Control (RBAC).

الاشتراكات والخدمات المدفوعة

طورت تجربة الاشتراكات المدفوعة داخل المنصة، بما يشمل:

  • خطط الاشتراك.
  • إدارة حالة الاشتراك.
  • التكامل مع Stripe.
  • الخدمات المدفوعة داخل المنصة.

الإشعارات وتجربة التطبيق

عملت على تحسين تجربة المستخدم من خلال:

  • Firebase Cloud Messaging.
  • الإشعارات الفورية.
  • Progressive Web App (PWA).
  • دعم الوضع الليلي.
  • تطوير الثيمات الموسمية مثل رمضان والعيد.
  • تصميم متجاوب لجميع الأجهزة.

06

أبرز النقاط التقنية

خلال عملي على المشروع، ركزت على بناء واجهة أمامية قابلة للتوسع وسهلة الصيانة، مع الاعتماد على أحدث الممارسات في تطوير تطبيقات React وNext.js.

أبرز ما عملت عليه:

  • React.
  • Next.js.
  • TypeScript.
  • Auth.js.
  • OAuth Authentication.
  • Role-Based Access Control (RBAC).
  • Stripe Subscription Workflows.
  • Firebase Cloud Messaging.
  • Progressive Web App.
  • Feature-Based Architecture.
  • Reusable Component Architecture.
  • Responsive Design.
  • تحسين تجربة المستخدم والأداء.
  • التعاون المستمر مع فرق Backend وProduct.

07

النتائج

خلال فترة عملي على المشروع، ساهمت في:

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

08

آراء وتوصيات

م/ محمد المهدي

مدير

م/ محمد المهدي

Solutions Architect | Technical Delivery Manager | Qabilah CO-Founder & CTO

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

لعب محمود دورًا محوريًا في بناء وتحسين واجهات المستخدم لمنصتنا، مع ضمان أداء سلس وتجربة مستخدم استثنائية. فهمه العميق لـ React.js، إلى جانب مكتبات وأدوات JavaScript الحديثة، مكّنه من تقديم كود نظيف وقابل للصيانة وقابل للتوسع باستمرار.

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

كان شرفًا العمل مع محمود، ولا أشك أنه سيتفوق في أي فرصة يسعى إليها. أوصي به بشدة لأي مؤسسة تبحث عن مطور React موثوق وماهر، وهو أيضًا زميل رائع في الفريق.

اقرأ التوصية كاملة
م/ سامح دعبس وم/ محمد المهدي
م/ سامح دعبس وم/ محمد المهدي

مدير

م/ سامح دعبس وم/ محمد المهدي

Managers at Qabilah

توصية قصيرة بالفيديو من م/ سامح دعبس وم/ محمد المهدي، مديراي في قبيلة، يتحدثان عن تجربة العمل معًا وأثر العمل على الواجهات الأمامية في المنصة.

اقرأ التوصية كاملة

09

ما تعلمته

العمل على منتج يستخدمه آلاف المستخدمين يوميًا علّمني أن تطوير الواجهة الأمامية لا يقتصر على كتابة الكود، بل يبدأ بفهم احتياجات المستخدم، وينتهي ببناء تجربة مستقرة وقابلة للتوسع.

كما علّمني العمل كمطور الواجهة الأساسي أهمية اتخاذ قرارات معمارية مدروسة، وبناء مكونات قابلة لإعادة الاستخدام، والمحافظة على جودة الكود مع استمرار إضافة ميزات جديدة دون التأثير على استقرار المنتج.

ومن أكثر ما أعتز به خلال هذه الرحلة أنني تعلمت الكثير من المهندس محمد المهدي والمهندس سامح دعبس. فقد كان لتوجيهاتهما، ومراجعاتهما التقنية، والنقاشات المستمرة معهما أثر كبير في تطوير طريقة تفكيري، وتعميق فهمي لبناء منتجات برمجية قابلة للتوسع، وليس مجرد تطوير واجهات المستخدم.