Snapgram-Social-Media-App
تفاصيل العمل
# Snapgram – تطبيق تواصل اجتماعي
تطبيق Social Media حديث مستوحى من Instagram، تم تطويره باستخدام React.js و TypeScript و Tailwind CSS و Appwrite.
يركز المشروع على بناء Frontend Architecture احترافية وقابلة للتطوير، مع واجهات Responsive وتجربة استخدام سلسة وتحسين الأداء وتنظيم الكود بشكل عملي يشبه المشاريع الحقيقية.
🚀 المعاينة المباشرة:
# المميزات
* نظام Authentication كامل (تسجيل حساب – تسجيل دخول – تسجيل خروج)
* إنشاء وتعديل وحذف المنشورات
* نظام Like و Save للمنشورات
* Infinite Scrolling لعرض المحتوى بشكل سلس
* Search مع Debounce لتحسين الأداء
* رفع الصور والملفات
* صفحات Profiles للمستخدمين
* تصميم Responsive يعمل على مختلف الأجهزة
* تحسين جلب البيانات والكاش باستخدام React Query
# التقنيات المستخدمة
## Frontend
* React.js
* TypeScript
* Tailwind CSS
## إدارة البيانات والـ State
* TanStack Query (React Query)
## Backend (BaaS)
* Appwrite
## Libraries
* React Router DOM
* React Dropzone
* Lucide Icons
* React Intersection Observer
# هيكلة المشروع
تم تنظيم المشروع بطريقة Modular Architecture مع فصل الملفات إلى:
* Components قابلة لإعادة الاستخدام
* Pages
* Custom Hooks
* إعدادات الـ API و Appwrite
* Utilities
* Global Styles
# المفاهيم المطبقة داخل المشروع
* تحسين الأداء باستخدام React Query Caching
* Infinite Scroll باستخدام Intersection Observer
* Authentication وربط قاعدة البيانات باستخدام Appwrite
* Debounced Search لتقليل عدد Requests غير الضرورية
* Component-Based Architecture
* Responsive UI Design
# التحديات أثناء التطوير
* إدارة الـ State بشكل منظم
* تنظيم Frontend Architecture قابلة للتوسع
* التعامل مع رفع الصور والتخزين
* تحسين الأداء وتجربة المستخدم
# تطويرات مستقبلية
* Dark Mode
* نظام التعليقات
* الإشعارات
* Follow / Unfollow System
* تحسين الـ Loading States و Skeleton UI
# GitHub