mkdir wc-proxy && cd wc-proxy
npm init -y
npm install express cors node-fetch dotenv

import 'dotenv/config';
import express from 'express';
import cors    from 'cors';
import fetch   from 'node-fetch';

const app  = express();
const PORT = process.env.PORT || 4000;

app.use( cors({ origin: process.env.FRONTEND_URL }) );
app.use( express.json() );

const WC_BASE = process.env.WC_BASE_URL;  // https://yourstore.com/wp-json/wc/v3
const CK      = process.env.WC_CK;
const CS      = process.env.WC_CS;
const AUTH    = 'Basic ' + Buffer.from( `${CK}:${CS}` ).toString( 'base64' );

// Generic proxy — /api/:resource maps to WC REST resource
app.get( '/api/:resource', async ( req, res ) => {
  const url      = `${WC_BASE}/${req.params.resource}?${new URLSearchParams( req.query )}`;
  const upstream = await fetch( url, { headers: { Authorization: AUTH } } );
  const data     = await upstream.json();
  res.status( upstream.status ).json( data );
} );

// Cart — uses WooCommerce Store API (no auth needed for guest sessions)
app.post( '/api/cart/add-item', async ( req, res ) => {
  const upstream = await fetch(
    `${process.env.WC_STORE_URL}/cart/add-item`,  // /wp-json/wc/store/v1
    {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify( req.body ),
    }
  );
  const data = await upstream.json();
  res.status( upstream.status ).json( data );
} );

app.listen( PORT, () => console.log( `Proxy on :${PORT}` ) );

npm create vite@latest wc-frontend -- --template react
cd wc-frontend && npm install
npm install @tanstack/react-query axios

import { useQuery } from '@tanstack/react-query';
import axios        from 'axios';

const PROXY = import.meta.env.VITE_PROXY_URL; // http://localhost:4000

export function useProducts( params = {} ) {
  return useQuery({
    queryKey: ['products', params],
    queryFn:  async () => {
      const { data } = await axios.get( `${PROXY}/api/products`, { params } );
      return data;
    },
    staleTime: 1000 * 60 * 5, // 5 minutes
  });
}

import { useProducts } from '../hooks/useProducts';

export default function ProductGrid() {
  const { data: products, isLoading, error } = useProducts({ per_page: 12 });

  if ( isLoading ) return <div className="loading">Loading products…</div>;
  if ( error )     return <div className="error">Failed to load products.</div>;

  return (
    <div className="product-grid">
      {products.map( product => (
        <div key={product.id} className="product-card">
          <img
            src={product.images[0]?.src}
            alt={product.images[0]?.alt || product.name}
            loading="lazy"
          />
          <h3>{product.name}</h3>
          <p dangerouslySetInnerHTML={{ __html: product.price_html }}/>
          <button onClick={() => addToCart( product.id )}>
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

import { useState, useCallback } from 'react';
import axios from 'axios';

const STORE_API = import.meta.env.VITE_WC_STORE_URL; // https://yourstore.com/wp-json/wc/store/v1

export function useCart() {
  const [cart, setCart]       = useState( null );
  const [loading, setLoading] = useState( false );

  const addItem = useCallback( async ( productId, quantity = 1 ) => {
    setLoading( true );
    try {
      const { data } = await axios.post(
        `${STORE_API}/cart/add-item`,
        { id: productId, quantity },
        { withCredentials: true } // send session cookie
      );
      setCart( data );
    } finally {
      setLoading( false );
    }
  }, [] );

  const getCart = useCallback( async () => {
    const { data } = await axios.get( `${STORE_API}/cart`, { withCredentials: true } );
    setCart( data );
  }, [] );

  return { cart, loading, addItem, getCart };
}

async function submitCheckout( billingData ) {
  const { data } = await axios.post(
    `${STORE_API}/checkout`,
    {
      billing_address:  billingData,
      shipping_address: billingData,
      payment_method:   'stripe',
      payment_data: [
        { key: 'stripe_source', value: billingData.stripeSourceId },
      ],
    },
    { withCredentials: true }
  );
  // data.payment_result.redirect_url — redirect user to confirmation page
  window.location.href = data.payment_result.redirect_url;
}