Social App
تطبيق Social Media متجاوب مبني باستخدام React، يتيح للمستخدمين تسجيل الدخول واستكشاف المنشورات ونشر النصوص والصور والتفاعل من خلال التعليقات وإدارة ملفاتهم الشخصية. يتصل التطبيق بـREST API خارجية باستخدام Axios وTanStack React Query، مع protected routes والتحقق من النماذج باستخدام schemas ومكونات UI قابلة لإعادة الاستخدام وتصميم متجاوب للهواتف والأجهزة اللوحية وأجهزة سطح المكتب.
التقنيات المستخدمة
نظرة عامة على المشروع
Social App هو تطبيق Social Media متجاوب يتيح للمستخدمين إنشاء الحسابات وتسجيل الدخول وتصفح المنشورات ونشر تحديثات نصية وصورية وإضافة التعليقات وإدارة ملفاتهم الشخصية. تنفصل الصفحات العامة عن المساحات المحمية مثل الخلاصة والمنشورات والملف الشخصي والإعدادات. يدير React Context المصادقة وبيانات المستخدم، بينما تتحكم protected routes في وصول المستخدمين المسجلين. يتصل Axios بـREST API خارجية، ويدير TanStack React Query بيانات الخادم وتحديثاتها. يتولى React Hook Form وZod التحقق من النماذج، بينما يدعم FormData رفع الصور مع المعاينة وقيود الملفات. تحافظ المكونات القابلة لإعادة الاستخدام والنوافذ المنبثقة والإشعارات والتصميم المتجاوب على تجربة متناسقة. ما تزال ميزتا إضافة الأصدقاء ومشاركة المنشورات عناصر UI فقط.
أهم الميزات
يمكن للمستخدمين إنشاء الحسابات وتسجيل الدخول والوصول إلى الصفحات المحمية.
يمكن للمستخدمين تصفح خلاصة مقسمة إلى صفحات وإنشاء منشورات نصية أو صورية.
يمكن للمستخدمين عرض التعليقات على المنشورات وإضافتها وحذفها.
يمكن للمستخدمين عرض ملفاتهم الشخصية ورفع صورة شخصية وتغيير كلمة المرور.
تستخدم النماذج React Hook Form وZod للتحقق، مع دعم رفع الصور.
توفر المكونات القابلة لإعادة الاستخدام تجربة متناسقة على أجهزة سطح المكتب والهواتف.
لقطات الشاشة
إنشاء حساب
تتيح صفحة إنشاء الحساب للمستخدمين إنشاء حساب جديد.
الصفحة الرئيسية للمستخدم
تعرض الصفحة الرئيسية منشورات المستخدمين الآخرين وتتيح للمستخدم إنشاء منشورات جديدة.
الملف الشخصي للمستخدم
تتيح صفحة الملف الشخصي للمستخدمين إنشاء المنشورات وعرض معلوماتهم الشخصية.
إعدادات المستخدم
تتيح صفحة إعدادات المستخدم إدارة إعدادات الحساب والتفضيلات.
إضافة تعليق
يتيح مكوّن التعليقات للمستخدمين إضافة تعليقات إلى المنشورات.
حذف منشور
يتيح مكوّن الحذف للمستخدمين إزالة منشوراتهم أو تعليقاتهم.
التحديات والحلول
- الحفاظ على المصادقة بعد تحديث الصفحة
- إدارة حالات API غير المتزامنة
- التحقق من النماذج ومدخلات المستخدم
- تحسين رفع الصور
- بناء مكونات قابلة لإعادة الاستخدام للمنشورات والتعليقات
- الحفاظ على استجابة التصميم
- تحديث البيانات بعد العمليات
- اُستخدم React Context وتخزين المتصفح وprotected routes لاستعادة الجلسات والتحكم في الوصول.
- اُستخدم TanStack React Query وحالات التحميل وإشعارات Toast لتقديم ملاحظات حول الطلبات.
- يجمع React Hook Form وZod قواعد التحقق ورسائل أخطاء الحقول.
- تمت إضافة المعاينات ورفع الملفات باستخدام FormData والتحقق من نوع الملف وحجمه.
- تتحكم المكونات القابلة لإعادة الاستخدام وبيانات المستخدم الحالي في إجراءات المحتوى.
- اُستخدم HeroUI وTailwind CSS بتنسيق متجاوب للهواتف والأجهزة اللوحية وأجهزة سطح المكتب.
- يُستخدم React Query لتحديث البيانات وإعادة جلبها ومزامنتها مع API.