Variable [Project Name]: React E-commerce App 1. 🎭 EMERGENT ROLE Started as a UI Developer, shifted to a Performance Architect when handling complex state logic for the cart. 2. 🎯 FINAL OBJECTIVE Built a high-performance shopping cart using Zustand with persistent storage and optimized re-renders. 3. 🛠️ REUSABLE ASSETS & PATCHES Target: src/store/cartStore.ts > useCart Change Logic: Added 'persist' middleware to keep cart items after page refresh and used individual selectors. Snippet: export const useCart = create(persist((set) => ({ items: [], addItem: (item) => set((state) => ({ items: [...state.items, item] })), }), { name: 'cart-storage' })); 4. 🧠 PRINCIPLES & DISCOVERIES When state is shared globally, then use individual selectors instead of the whole store, because it prevents unnecessary re-renders of the entire component tree. 5. ⚠️ WARNINGS & LIMITATIONS Do not use Redux for this specific project as the overhead is too high for the current team size. 6. 💡 ILLUSTRATIVE EXAMPLES To add an item to the cart, use: const addItem = useCart(s => s.addItem); inside your component. This ensures only the 'addItem' function is tracked. 7. 🧩 PROJECT STATE MAP React E-commerce App ├── {Pre-existing} Auth Module ✅ ├── {Built this session} Zustand Store (Cart Logic) ✅ ├── {Modified} Navbar.tsx ⚠️ (Updated to listen to Zustand) └── {Open} Checkout API Integration 🔲 8. 🎨 ROLE INFLUENCE ON OUTPUT The Performance Architect role prioritized rendering efficiency and local storage persistence over simple UI implementation. 🔖 Knowledge Harvest complete.