Vibe - منصة التواصل الاجتماعي

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

1. المشكلة

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

2. الهدف

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

3. النهج وعملية التطوير

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

تم بناء Vibe باستخدام Next.js، React، و PostgreSQL.

عملية التطوير:

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

4. المزايا الرئيسية

- تسجيل دخول وإنشاء حساب: يمكن للمستخدمين إنشاء حسابات وتسجيل الدخول للموقع.

- إنشاء وتعديل وحذف المنشورات: يتمكن المستخدمون من نشر منشورات جديدة، تعديل أو حذف منشوراتهم الخاصة، وذكر مستخدمين آخرين في المنشورات.

- الإعجابات والتعليقات: يستطيع المستخدمون الإعجاب بالمنشورات والتعليق عليها، بالإضافة إلى إضافة ردود فعل.

- صفحات الملف الشخصي: يمكن للمستخدمين عرض ملفاتهم الشخصية وملفات المستخدمين الآخرين.

- متابعة المستخدمين: يمكن للمستخدمين متابعة حسابات الآخرين ومشاهدة منشوراتهم في تبويب "المتابعة".

- الإشعارات: يتم إشعار المستخدمين عندما يُعجب أحدهم بمنشوراتهم أو يتابعهم مستخدم آخر.

- تصميم متجاوب: تم بناء الموقع بتصميم يستجيب لشاشات الهواتف المحمولة، ويعمل بشكل مثالي على شاشات أكبر مثل شاشات الحواسيب المكتبية.

5. النتيجة والتعلم

النتيجة:

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

ما تعلمته:

خلال عملية تطوير Vibe، تعلمت الكثير عن تطوير الويب المتكامل وتحسين تجربة المستخدم، بالإضافة إلى التعامل مع قاعدة بيانات كبيرة ومعالجة مشاكل مثل الإشارة إلى مستخدمين آخرين في المنشورات. كما اكتسبت خبرة عملية في بناء تطبيقات تفاعلية وتحسين محركات البحث.