feat: Create customer-spa core foundation (Sprint 1)

Sprint 1 - Foundation Complete! ✅

Created Core Files:
✅ src/main.tsx - Entry point
✅ src/App.tsx - Main app with routing
✅ src/index.css - Global styles (TailwindCSS)
✅ index.html - Development HTML

Pages Created (Placeholders):
✅ pages/Shop/index.tsx - Product listing
✅ pages/Product/index.tsx - Product detail
✅ pages/Cart/index.tsx - Shopping cart
✅ pages/Checkout/index.tsx - Checkout process
✅ pages/Account/index.tsx - My Account with sub-routes

Library Setup:
✅ lib/api/client.ts - API client with endpoints
✅ lib/cart/store.ts - Cart state management (Zustand)
✅ types/index.ts - TypeScript definitions

Configuration:
✅ .gitignore - Ignore node_modules, dist, logs
✅ README.md - Documentation

Features Implemented:

1. Routing (React Router v7)
   - /shop - Product listing
   - /shop/product/:id - Product detail
   - /shop/cart - Shopping cart
   - /shop/checkout - Checkout
   - /shop/account/* - My Account (dashboard, orders, profile)

2. API Client
   - Fetch wrapper with error handling
   - WordPress nonce authentication
   - Endpoints for shop, cart, checkout, account
   - TypeScript typed responses

3. Cart State (Zustand)
   - Add/update/remove items
   - Cart drawer (open/close)
   - LocalStorage persistence
   - Quantity management
   - Coupon support

4. Type Definitions
   - Product, Order, Customer types
   - Address, ShippingMethod, PaymentMethod
   - Cart, CartItem types
   - Window interface for WordPress globals

5. React Query Setup
   - QueryClient configured
   - 5-minute stale time
   - Retry on error
   - No refetch on window focus

6. Toast Notifications
   - Sonner toast library
   - Top-right position
   - Rich colors

Tech Stack:
- React 18 + TypeScript
- Vite (port 5174)
- React Router v7
- TanStack Query
- Zustand (state)
- TailwindCSS
- shadcn/ui
- React Hook Form + Zod

Dependencies Installed:
✅ 437 packages installed
✅ All peer dependencies resolved
✅ Ready for development

Next Steps (Sprint 2):
- Implement Shop page with product grid
- Create ProductCard component
- Add filters and search
- Implement pagination
- Connect to WordPress API

Ready to run:
```bash
cd customer-spa
npm run dev
# Opens https://woonoow.local:5174
```

customer-spa/src/pages/Account/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Routes, Route, Link } from 'react-router-dom';
+
+function Dashboard() {
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">My Account</h2>
+      <p className="text-muted-foreground">Welcome to your account dashboard.</p>
+    </div>
+  );
+}
+
+function Orders() {
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Orders</h2>
+      <p className="text-muted-foreground">Your order history will appear here.</p>
+    </div>
+  );
+}
+
+function Profile() {
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Profile</h2>
+      <p className="text-muted-foreground">Edit your profile information.</p>
+    </div>
+  );
+}
+
+export default function Account() {
+  return (
+    <div className="container-safe py-8">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+        {/* Sidebar Navigation */}
+        <aside className="md:col-span-1">
+          <nav className="space-y-2">
+            <Link 
+              to="/account" 
+              className="block px-4 py-2 rounded-lg hover:bg-accent"
+            >
+              Dashboard
+            </Link>
+            <Link 
+              to="/account/orders" 
+              className="block px-4 py-2 rounded-lg hover:bg-accent"
+            >
+              Orders
+            </Link>
+            <Link 
+              to="/account/profile" 
+              className="block px-4 py-2 rounded-lg hover:bg-accent"
+            >
+              Profile
+            </Link>
+          </nav>
+        </aside>
+        
+        {/* Main Content */}
+        <main className="md:col-span-3">
+          <Routes>
+            <Route index element={<Dashboard />} />
+            <Route path="orders" element={<Orders />} />
+            <Route path="profile" element={<Profile />} />
+          </Routes>
+        </main>
+      </div>
+    </div>
+  );
+}

customer-spa/src/pages/Cart/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Cart() {
+  return (
+    <div className="container-safe py-8">
+      <h1 className="text-3xl font-bold mb-6">Shopping Cart</h1>
+      <p className="text-muted-foreground">Cart coming soon...</p>
+    </div>
+  );
+}

customer-spa/src/pages/Checkout/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Checkout() {
+  return (
+    <div className="container-safe py-8">
+      <h1 className="text-3xl font-bold mb-6">Checkout</h1>
+      <p className="text-muted-foreground">Checkout coming soon...</p>
+    </div>
+  );
+}

customer-spa/src/pages/Product/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function Product() {
+  const { id } = useParams<{ id: string }>();
+  
+  return (
+    <div className="container-safe py-8">
+      <h1 className="text-3xl font-bold mb-6">Product #{id}</h1>
+      <p className="text-muted-foreground">Product detail coming soon...</p>
+    </div>
+  );
+}

customer-spa/src/pages/Shop/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Shop() {
+  return (
+    <div className="container-safe py-8">
+      <h1 className="text-3xl font-bold mb-6">Shop</h1>
+      <p className="text-muted-foreground">Product listing coming soon...</p>
+    </div>
+  );
+}