Split-Context Cart Architecture
Interactive Dependency & Data-Flow Mapping
Pause Flow
Env: Prod (Firebase)
Isolate Facade
Reset
Data Sources
Context Layer
Hooks & Facades
View Components
PROD
DEV
READ
ADD TO CART
RENDER
services/products.ts
Firebase
local JSON
ProductsContext
Product.tsx
CartContextProvider
useCartProducts
useCartTotal
useCart
FACADE (CLICK)
CartProduct.tsx
Interactive Diagram
Hover over any node to inspect direct dependencies. Click any node to open its architectural detail. Click useCart to isolate the facade hooks.