SocialHub – منصة تواصل اجتماعي

SocialHub – منصة تواصل اجتماعي

أبرز المميزات التي تم تنفيذها:

- نظام تسجيل الدخول / التسجيل كامل (Login – Register) مع توثيق JWT.

- إنشاء / تعديل / حذف البوستات مع دعم رفع الصور.

- نظام تفاعل كامل: لايك(ديزاين فقط) – تعليق(تفاعلي) – حفظ البوست(ديزاين فقط).

- عرض تفاصيل البوست في صفحة مستقلة (Post Details Page) مع التعليقات.

- Sidebar يسار ويمين مع Navigation + Trending + Suggested Friends + Communities(ديزاين فقط).

- Responsive Design كامل (Desktop + Tablet + Mobile) مع Bottom Sheets للسايدبارز على الموبايل.

- تحميل البيانات باستخدام React Query (TanStack Query) مع Caching و Refetching ذكي.

- Form validation باستخدام React Hook Form + Zod.

- Toast notifications باستخدام react-toastify.

- تأكيد الحذف بـ SweetAlert2.

- تصميم عصري ونظيف باستخدام Tailwind CSS + HeroUI / NextUI components.

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

Frontend: React.js, Vite, Tailwind CSS, React Query, React Hook Form, Zod, React Router v6-

UI Library: HeroUI (أو NextUI).

.Backend APIs: RESTful APIs (signup, login, CRUD posts, comments, likes…) -

.State Management: React Context + React Query -

.Authentication: JWT + localStorage -

.Notifications: react-toastify + SweetAlert2 -

الهدف من المشروع:

بناء تطبيق تواصل اجتماعي كامل من الصفر يحاكي تجربة التطبيقات الحديثة (مثل تويتر / إنستغرام / فيسبوك) مع التركيز على الأداء، تجربة المستخدم، الـ Responsiveness والكود النظيف والمنظم.

المميزات اللي نفذتها بنفسي بدون templates جاهزة:

- نظام الـ Sidebar المتجاوب مع Drawer/Bottom Sheet على الموبايل.

- Post creation + edit + delete مع تحديث فوري للـ UI.

- Comment system مع إمكانية إضافة تعليقات جديدة في الوقت الفعلي (من غير WebSocket).

- Routing محمي (Protected Routes) للمستخدمين المسجلين.