┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Catalog   │     │   Orders    │     │  Payments   │
│   Service   │     │   Service   │     │   Service   │
└─────────────┘     └─────────────┘     └─────────────┘
       │                   │                   │
       └───────────────────┴───────────────────┘
                           │
                    ┌──────────────┐
                    │  API Gateway │
                    └──────────────┘

// Product API client
class ProductService {
  private baseUrl = process.env.COMMERCE_API_URL;

  async getProduct(id: string): Promise<Product> {
    const response = await fetch(${this.baseUrl}/products/${id});
    return response.json();
  }

  async searchProducts(query: SearchQuery): Promise<SearchResult> {
    const response = await fetch(${this.baseUrl}/products/search, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(query)
    });
    return response.json();
  }
}

// Next.js product page
export async function getStaticProps({ params }) {
  const commerce = new CommerceClient();
  const product = await commerce.getProduct(params.slug);
  const relatedProducts = await commerce.getRelatedProducts(product.id);

  return {
    props: { product, relatedProducts },
    revalidate: 60 // ISR: revalidate every minute
  };
}

export default function ProductPage({ product, relatedProducts }) {
  return (
    <ProductLayout>
      <ProductGallery images={product.images} />
      <ProductDetails product={product} />
      <AddToCart product={product} />
      <RelatedProducts products={relatedProducts} />
    </ProductLayout>
  );
}

| Criterion           | Weight | Platform A | Platform B |
|---------------------|--------|------------|------------|
| API completeness    | 25%    | 9/10       | 7/10       |
| Customization       | 20%    | 8/10       | 9/10       |
| Performance         | 20%    | 9/10       | 8/10       |
| Total cost          | 15%    | 7/10       | 8/10       |
| Integration options | 10%    | 8/10       | 7/10       |
| Support & community | 10%    | 8/10       | 9/10       |

// app/products/[slug]/page.tsx
import { getProduct } from '@/lib/commerce';
import { ProductView } from '@/components/product-view';

export async function generateStaticParams() {
  const products = await getAllProducts();
  return products.map((product) => ({
    slug: product.slug,
  }));
}

export default async function ProductPage({
  params
}: {
  params: { slug: string }
}) {
  const product = await getProduct(params.slug);

  return <ProductView product={product} />;
}

'use client';

import { createContext, useContext, useReducer } from 'react';

const CartContext = createContext<CartContextType | null>(null);

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD_ITEM':
      const existingItem = state.items.find(
        item => item.id === action.payload.id
      );
      if (existingItem) {
        return {
          ...state,
          items: state.items.map(item =>
            item.id === action.payload.id
              ? { ...item, quantity: item.quantity + 1 }
              : item
          ),
        };
      }
      return {
        ...state,
        items: [...state.items, { ...action.payload, quantity: 1 }],
      };

    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload),
      };

    default:
      return state;
  }
}

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

class CheckoutService {
  async createCheckout(cartId: string): Promise<Checkout> {
    const cart = await this.cartService.getCart(cartId);

    return this.commerceApi.post('/checkouts', {
      lineItems: cart.items.map(item => ({
        variantId: item.variantId,
        quantity: item.quantity
      }))
    });
  }

  async addShippingAddress(
    checkoutId: string,
    address: Address
  ): Promise<Checkout> {
    return this.commerceApi.put(/checkouts/${checkoutId}/shipping, address);
  }

  async selectShippingMethod(
    checkoutId: string,
    methodId: string
  ): Promise<Checkout> {
    return this.commerceApi.put(
      /checkouts/${checkoutId}/shipping-method,
      { methodId }
    );
  }

  async completeCheckout(
    checkoutId: string,
    paymentDetails: PaymentDetails
  ): Promise<Order> {
    // Process payment through payment gateway
    const paymentResult = await this.paymentService.process(paymentDetails);

    if (!paymentResult.success) {
      throw new PaymentError(paymentResult.error);
    }

    // Complete order in commerce platform
    return this.commerceApi.post(/checkouts/${checkoutId}/complete, {
      paymentId: paymentResult.id
    });
  }
}

import { loadStripe } from '@stripe/stripe-js';
import { Elements, PaymentElement } from '@stripe/react-stripe-js';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!);

export function CheckoutPayment({ clientSecret }: { clientSecret: string }) {
  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
      <PaymentForm />
    </Elements>
  );
}

function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    if (!stripe || !elements) return;

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: ${window.location.origin}/order/confirmation,
      },
    });

    if (error) {
      setError(error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe}>
        Complete Purchase
      </button>
    </form>
  );
}

export async function getStaticProps({ params }) {
  const product = await getProduct(params.slug);

  return {
    props: { product },
    revalidate: 60, // Revalidate every minute
  };
}

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Cache product pages at edge
  if (request.nextUrl.pathname.startsWith('/products/')) {
    response.headers.set(
      'Cache-Control',
      's-maxage=60, stale-while-revalidate=600'
    );
  }

  return response;
}