مذكرات سعيد
اتقرأ🔖

🗺️ الخريطة

البداية٣ فصول
فصل ١شكل الفولدرات والطبقات#ست طبقات #الأعلى يعتمد على الأدنى
فصل ٢تفاصيل الفولدرات#index.ts #مش كل الفولدرات من أول يوم
فصل ٣قواعد الاعتماد#اتجاه الاعتماد #نفس الطبقة ممنوعة #الداتا تطلع لفوق
التدفق٥ فصول
فصل ٤المنتج يتضاف للسلة#زرار #mutation #API #كاش #عرض
فصل ٥كود المنتج والسلة والزرار#types #getProduct #addCartItem #invalidateQueries
فصل ٦الهيدر يعرف إن السلة اتغيرت#نفس المفتاح #invalidate #من غير props
فصل ٧تحديث السلة قبل رد السيرفر#كاش مؤقت #رجوع عند الفشل #نفس المفتاح
فصل ٨صفحة التفاصيل تجمع الشرائح#الصفحة تجمع #مش منطق السلة #الوش ليست لوحدها
القواعد٣ فصول
فصل ٩فيتشر عايزة داتا من فيتشر تانية#المعرف كمدخل #الكيان مش الفيتشر #مش كل مشترك في shared
فصل ١٠قواعد عملية للفريق#index.ts #منع الدائرة #React Query #Zustand للواجهة
الآخرCheat Sheet: FSD#الأعلى للأدنى #index.ts #نفس المفتاح

تطبيق فرونت إند عايزين نستخدم فيه Feature-Sliced Design. المذكرة دي شكل الـ architecture والفولدرات، وتدفق الداتا لما Feature عايزة داتا من Feature تانية، على مثال E-commerce.

التطبيق فيه:

  • Products و Categories.
  • Cart وإضافة المنتجات للسلة.
  • Wishlist.
  • Product Details.
  • Checkout و Orders.
  • Authentication.
  • صفحات Home وProduct Listing وCart.
القاعدة: الـ Layer الأعلى يعتمد على Layer أدنى. العكس ممنوع.