Snapgram — شبكة تواصل اجتماعي بـ React و TypeScript

تطبيق ويب لشبكة تواصل اجتماعي، نفذته بالكامل كمشروع شخصي باستخدام React وTypeScript.

المميزات

- نظام حسابات كامل: تسجيل، تسجيل دخول، وجلسة محفوظة.

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

- الإعجاب والحفظ، مع صفحتين مستقلتين للمنشورات التي تم الإعجاب بها والمحفوظة.

- صفحات المستخدمين وتعديل الملف الشخصي، مع صفحة لجميع المستخدمين.

- صفحة استكشاف بتحميل تدريجي (Infinite Scroll) عند الوصول إلى نهاية القائمة.

- بحث فوري مع Debounce ذكي لتقليل عدد الطلبات المرسلة إلى الخادم.

- واجهة Responsive بالكامل: قائمة جانبية على Desktop وشريط سفلي على Mobile.

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

- الواجهة: React + TypeScript + Tailwind CSS مع مكونات shadcn/ui وRadix.

- إدارة حالة الخادم عبر React Query، مع التخزين المؤقت وإعادة الجلب تلقائيًا بعد التعديلات.

- التحقق من المدخلات باستخدام React Hook Form وZod.

- الخدمات الخلفية عبر Appwrite لإدارة قاعدة البيانات وتخزين الصور والمصادقة.

- التوجيه عبر React Router مع حماية المسارات حسب حالة تسجيل الدخول.

بيانات الدخول:

اضغط مباشرة على "تسجيل الدخول" للتجربة؛ بيانات الدخول معبأة مسبقًا في النموذج.