Why Hydrogen: The React Developer's Guide to Modern Shopify

// ProductCard.tsx - Reusable, typed, testable
interface ProductCardProps {
product: Product
onAddToCart: (id: string) => Promise<void>
showQuickView?: boolean
}

export function ProductCard({ 
product, 
onAddToCart, 
showQuickView = false 
}: ProductCardProps) {
let [loading, setLoading] = useState(false)
let [showDetails, setShowDetails] = useState(false)

let handleAddToCart = async () => {
  setLoading(true)
  try {
    await onAddToCart(product.id)
    // Show success notification
    toast.success('Added to cart!')
  } catch (error) {
    toast.error('Failed to add to cart')
  } finally {
    setLoading(false)
  }
}

return (
  <div className="product-card group">
    <div className="relative">
      <Image
        src={product.featuredImage?.url}
        alt={product.title}
        width={300}
        height={300}
        loading="lazy"
      />
      
      {showQuickView && (
        <button 
          className="quick-view-btn"
          onClick={() => setShowDetails(true)}
        >
          Quick View
        </button>
      )}
    </div>
    
    <div className="product-info">
      <h3>{product.title}</h3>
      <p className="price">
        {formatMoney(product.priceRange.minVariantPrice)}
      </p>
      
      <button 
        onClick={handleAddToCart}
        disabled={loading}
        className="add-to-cart-btn"
      >
        {loading ? 'Adding...' : 'Add to Cart'}
      </button>
    </div>
    
    {showDetails && (
      <ProductQuickView 
        product={product}
        onClose={() => setShowDetails(false)}
      />
    )}
  </div>
)
}

// CartContext.tsx - Modern state management
interface CartItem {
id: string
title: string
quantity: number
price: number
image?: string
}

interface CartContextType {
items: CartItem[]
totalItems: number
totalPrice: number
addItem: (item: CartItem) => Promise<void>
updateQuantity: (id: string, quantity: number) => Promise<void>
removeItem: (id: string) => Promise<void>
clearCart: () => Promise<void>
}

let CartContext = createContext<CartContextType | null>(null)

export function CartProvider({ children }: { children: ReactNode }) {
let [items, setItems] = useState<CartItem[]>([])
let [loading, setLoading] = useState(false)

let addItem = async (newItem: CartItem) => {
  setLoading(true)
  try {
    let response = await fetch('/api/cart/add', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newItem)
    })
    
    if (!response.ok) throw new Error('Failed to add item')
    
    let updatedCart = await response.json()
    setItems(updatedCart.items)
    
    // Show success notification
    toast.success(`Added ${newItem.title} to cart`)
  } catch (error) {
    toast.error('Failed to add item to cart')
  } finally {
    setLoading(false)
  }
}

let totalItems = useMemo(() => 
  items.reduce((sum, item) => sum + item.quantity, 0), [items]
)

let totalPrice = useMemo(() =>
  items.reduce((sum, item) => sum + (item.price * item.quantity), 0), [items]
)

return (
  <CartContext.Provider value={{
    items, totalItems, totalPrice,
    addItem, updateQuantity, removeItem, clearCart
  }}>
    {children}
  </CartContext.Provider>
)
}

export function useCart() {
let context = useContext(CartContext)
if (!context) {
  throw new Error('useCart must be used within CartProvider')
}
return context
}