Online Store with Shopping Cart

Build a small online store in React with TypeScript. The store has a product catalog and a shopping cart that persists across pages.

Product Catalog:

• Fetches products from /api/products which returns { products: Product[] } where each Product has id: string, name: string, price: number, category: string, image: string, and inStock: boolean.
• Products can be searched by name and filtered by category using controls at the top of the page.
• Each product card has an "Add to Cart" button.

Shopping Cart:

• The cart icon in the header shows the current item count.
• A cart drawer/panel can be toggled open from any page.
• Users can adjust quantity or remove items from the cart.
• The cart shows a subtotal, estimated tax (8%), and grand total.
• When "Add to Cart" is called and the item is already in the cart, increment its quantity.
• Adding to cart should call POST /api/cart to persist server-side, but the UI should update immediately without waiting.

Pages (use React Router):

• /products -- the product catalog with search and filters
• /products/:id -- a product detail page (fetches from /api/products/:id)
• /cart -- a full cart page

Output

Produce TypeScript/TSX files in a src/ directory:

• src/types.ts -- TypeScript type definitions
• src/hooks/useProducts.ts -- hook to fetch product data
• src/hooks/useProduct.ts -- hook to fetch a single product
• src/context/CartContext.tsx -- cart state shared across the app
• src/components/Header.tsx -- header with cart icon and count
• src/components/ProductCatalog.tsx -- the catalog page with search/filter
• src/components/ProductCard.tsx -- individual product card
• src/components/ProductDetail.tsx -- product detail page
• src/components/CartDrawer.tsx -- the slide-out cart panel
• src/components/CartPage.tsx -- the full cart page
• src/App.tsx -- app with routing

The code does not need to run against a real server. Do not include test files or build configuration.