Social App

نوع العمل

تطبيق ويب لتواصل اجتماعي بنظام صفحات متعددة (SPA) — فيه هوم فيد للبوستات، ملفات شخصية، تفاصيل بوست، متابعة مقترحات، إشعارات، وحفظ إشارات مرجعية. واجهة المستخدم كلها مصممة بمكتبة HeroUI (NextUI) بتصميم حديث ومتحرك.

المميزات:

• نظام تسجيل وتسجيل دخول مع حماية تلقائية للطرق (Routes) — صفحة لا تقدر تتفتح إلا بعد الدخول • فيد منشورات + صفحة تفاصيل لكل بوست • ملف شخصي ليك وملف لأي مستخدم تاني (UserPage) • صفحة إعدادات (Settings) وحفظ إشارات (Bookmarks) • اقتراحات متابعة (Suggestions) + صفحة إشعارات (Notifications) • إدارة جلسة المستخدم (Token) عبر React Context • جلب البيانات بـ React Query (كاش + إعادة جلب ذكية بدون رفريش) عبر Axios • فورمز بحماية واعتماد بيانات بـ Zod + React Hook Form • حركات سلسة بـ Framer Motion + تحميل بـ Spinners • تصميم متجاوب بالكامل

طريقة التنفيذ:

مبني بـ React 19 + Vite، والتنقل بين الصفحات بـ React Router v7 بنظام Layout واحد. حماية الطرق معمولة بمكونين: ProtectedInner (يمنع الزيارة لو مش داخل) و ProtectedOuter (يمنع صفحة الدخول لو انت داخل أصلًا). بيانات الـ API بتتجاب بـ Axios وتتخزن في React Query، وحالة الـ Token في Context، ثم نُشر على Vercel.