فايب - عمار البحيري

تطبيق فايب هو أول مشروع متكامل (Full-stack) أبنيه على الإطلاق، وقد تم بناؤه في عام ۲۰۲۳ عندما كنت أتعلم React وNext.js لأول مرة. على الرغم من أن التطبيق يظل نموذجاً قيماً لعرض الميزات والتفكير في بناء المنتجات، إلا أن القاعدة البرمجية لا تعكس ممارساتي التطويرية الحالية. منذ ذلك الحين، قمت بتحسين أسلوبي بشكل كبير في المعمارية البرمجية، تنظيم الكود، الاختبارات، أمان الأنواع (Type safety)، وقابلية الصيانة.

تطبيق فايب هو تطبيق ويب متكامل لشبكة تواصل اجتماعي، يحتوي على الوظائف الأساسية مثل نشر المنشورات، الإعجاب والتعليق، ومتابعة المستخدمين الآخرين. كما يتضمن ميزات أكثر تفصيلاً مثل التفاعل مع المنشورات، تكامل OpenGraph، والإشارات إلى المستخدمين (Mentions). بدأ المشروع كواجب ختامي لدورة CS50 ثم تطور لاحقاً إلى مشروع شخصي للتعلم والممارسة على React وNext.js.

المشكلة

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

الأهداف والغايات

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

مراحل التطوير

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

نسخة تصميم مبكرة لتطبيق فايب باستخدام Material UI

النتائج

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

الميزات الرئيسية

من أبرز ميزات فايب:

تسجيل المستخدمين وتسجيل الدخول: يمكن للمستخدمين إنشاء حسابات، تسجيل الدخول، وإدارة ملفاتهم الشخصية.
إدارة المنشورات (CRUD): يمكن للمستخدمين إنشاء المنشورات وقراءتها وتحديثها وحذفها، مع إمكانية الإشارة إلى مستخدمين آخرين.
التعليقات والتفاعلات: يمكن للمستخدمين التعليق على المنشورات والإعجاب بها والتفاعل معها بتفاعلات مخصصة.
صفحات الملف الشخصي: يمتلك كل مستخدم صفحة ملف شخصي خاصة به لعرض منشوراته ونشاطه.
نظام المتابعة: يمكن للمستخدمين متابعة الآخرين ورؤية منشوراتهم في خلاصة مخصصة (Feed).
الإشعارات: يتم إشعار المستخدمين عندما يعجب شخص ما بمنشورهم أو يقوم بمتابعتهم.
تكامل OpenGraph: إنشاء صور وعناوين OG بشكل ديناميكي بناءً على كاتب المنشور ومحتواه.
تصميم متجاوب: تم تصميم التطبيق ليعمل على الجوال أولاً (Mobile-first) ولكنه يتكيف بشكل ممتاز مع الشاشات المكتبيّة الكبيرة.

الخلاصة والدروس المستفادة

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