Shopify Hydrogen:
  Remix (your frontend) → Shopify Storefront API → Shopify backend (managed)
  ✅ Shopify payments, checkout, inventory, apps
  ❌ Can't customize backend logic; Shopify fees apply

Medusa:
  Any frontend → Medusa REST API → Medusa Node.js server → PostgreSQL + Redis
  ✅ Full customization, self-host, no platform fees
  ❌ You manage server infrastructure

Commerce.js:
  Any frontend → Commerce.js SDK → Commerce.js managed API
  ✅ No server management, developer-friendly SDK
  ❌ SaaS pricing at scale; limited customization

npm create @shopify/hydrogen@latest
# Choose a template: Hello World, Demo Store
cd my-store
npm install
npm run dev

// lib/shopify.ts
import { createStorefrontClient } from "@shopify/hydrogen";

export const client = createStorefrontClient({
  storeDomain: process.env.PUBLIC_STORE_DOMAIN!,      // "mystore.myshopify.com"
  publicStorefrontToken: process.env.PUBLIC_STOREFRONT_API_TOKEN!,
  privateStorefrontToken: process.env.PRIVATE_STOREFRONT_API_TOKEN,
  storefrontVersion: "2024-01",
});

// Query type helper
export const { storefront } = client;

// app/routes/products.tsx (Remix route)
import { json, type LoaderFunctionArgs } from "@shopify/remix-oxygen";
import { useLoaderData } from "@remix-run/react";

const PRODUCTS_QUERY = `#graphql
  query Products($first: Int!, $cursor: String) {
    products(first: $first, after: $cursor, sortKey: BEST_SELLING) {
      nodes {
        id
        title
        handle
        featuredImage {
          url
          altText
          width
          height
        }
        priceRange {
          minVariantPrice {
            amount
            currencyCode
          }
        }
        variants(first: 5) {
          nodes {
            id
            title
            availableForSale
            price {
              amount
              currencyCode
            }
          }
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }
`;

export async function loader({ context }: LoaderFunctionArgs) {
  const { storefront } = context;

  const { products } = await storefront.query(PRODUCTS_QUERY, {
    variables: { first: 24 },
  });

  return json({ products });
}

export default function ProductsPage() {
  const { products } = useLoaderData<typeof loader>();

  return (
    <div className="products-grid">
      {products.nodes.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Cart operations via Storefront API
const ADD_TO_CART_MUTATION = `#graphql
  mutation AddToCart($cartId: ID!, $lines: [CartLineInput!]!) {
    cartLinesAdd(cartId: $cartId, lines: $lines) {
      cart {
        id
        totalQuantity
        lines(first: 100) {
          nodes {
            id
            quantity
            merchandise {
              ... on ProductVariant {
                id
                title
                price { amount currencyCode }
                product { title }
              }
            }
          }
        }
        cost {
          totalAmount { amount currencyCode }
        }
      }
    }
  }
`;

const CREATE_CART_MUTATION = `#graphql
  mutation CreateCart($lines: [CartLineInput!]) {
    cartCreate(input: { lines: $lines }) {
      cart {
        id
        checkoutUrl
      }
    }
  }
`;

// Cart action in Remix
export async function action({ request, context }: ActionFunctionArgs) {
  const { storefront } = context;
  const formData = await request.formData();

  const variantId = formData.get("variantId") as string;
  const cartId = formData.get("cartId") as string | null;

  if (!cartId) {
    // Create new cart
    const { cartCreate } = await storefront.mutate(CREATE_CART_MUTATION, {
      variables: { lines: [{ merchandiseId: variantId, quantity: 1 }] },
    });
    return json({ cart: cartCreate.cart });
  }

  // Add to existing cart
  const { cartLinesAdd } = await storefront.mutate(ADD_TO_CART_MUTATION, {
    variables: {
      cartId,
      lines: [{ merchandiseId: variantId, quantity: 1 }],
    },
  });

  return json({ cart: cartLinesAdd.cart });
}

npx create-medusa-app@latest my-store
# Installs: Medusa backend + Next.js storefront template
cd my-store/backend
npm run dev  # Runs on :9000

// Fetch products from your Medusa backend
async function getProducts() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/store/products`,
    {
      headers: {
        "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY!,
      },
    }
  );

  const { products } = await response.json();
  return products;
}

// Fetch a single product by handle
async function getProduct(handle: string) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/store/products?handle=${handle}`,
    {
      headers: {
        "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY!,
      },
    }
  );

  const { products } = await response.json();
  return products[0];
}

import Medusa from "@medusajs/medusa-js";

const medusa = new Medusa({
  baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!,
  maxRetries: 3,
  publishableApiKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY!,
});

// Create cart
async function createCart(regionId: string) {
  const { cart } = await medusa.carts.create({ region_id: regionId });
  localStorage.setItem("cart_id", cart.id);
  return cart;
}

// Add item to cart
async function addToCart(variantId: string, quantity: number = 1) {
  let cartId = localStorage.getItem("cart_id");

  if (!cartId) {
    const cart = await createCart("reg_XXXXXXXX");
    cartId = cart.id;
  }

  const { cart } = await medusa.carts.lineItems.create(cartId, {
    variant_id: variantId,
    quantity,
  });

  return cart;
}

// Complete checkout
async function checkout(cartId: string, email: string, address: Address) {
  // 1. Add customer email
  await medusa.carts.update(cartId, { email });

  // 2. Add shipping address
  await medusa.carts.update(cartId, { shipping_address: address });

  // 3. List available shipping options
  const { shipping_options } = await medusa.shippingOptions.listCartOptions(cartId);

  // 4. Select shipping method
  await medusa.carts.addShippingMethod(cartId, {
    option_id: shipping_options[0].id,
  });

  // 5. Get Stripe payment session
  await medusa.carts.createPaymentSessions(cartId);
  const { cart } = await medusa.carts.setPaymentSession(cartId, {
    provider_id: "stripe",
  });

  return cart;
}

// Custom loyalty points module — src/modules/loyalty/index.ts
import { Module } from "@medusajs/utils";
import LoyaltyModuleService from "./service";

export const LOYALTY_MODULE = "loyaltyModuleService";

export default Module(LOYALTY_MODULE, {
  service: LoyaltyModuleService,
});

// Service implementation
class LoyaltyModuleService {
  async getPoints(customerId: string): Promise<number> {
    return await this.loyaltyRepository.getBalance(customerId);
  }

  async addPoints(customerId: string, orderId: string, amount: number): Promise<void> {
    const points = Math.floor(amount / 100);  // 1 point per dollar
    await this.loyaltyRepository.addTransaction(customerId, orderId, points);
  }
}

npm install @chec/commerce.js

import Commerce from "@chec/commerce.js";

export const commerce = new Commerce(process.env.NEXT_PUBLIC_CHEC_PUBLIC_KEY!, true);

import { useEffect, useState } from "react";
import { commerce } from "@/lib/commerce";
import type { Product } from "@chec/commerce.js/types/product";

function useProducts() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    commerce.products.list({ limit: 20, sortBy: "created", sortDirection: "desc" }).then(({ data }) => {
      setProducts(data);
      setLoading(false);
    });
  }, []);

  return { products, loading };
}

function ProductsPage() {
  const { products, loading } = useProducts();

  if (loading) return <Spinner />;

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <img src={product.image?.url} alt={product.name} />
          <h2>{product.name}</h2>
          <p>{product.price.formatted_with_symbol}</p>
        </div>
      ))}
    </div>
  );
}

import { useState } from "react";
import { commerce } from "@/lib/commerce";
import type { Cart } from "@chec/commerce.js/types/cart";

function useCart() {
  const [cart, setCart] = useState<Cart | null>(null);

  async function addToCart(productId: string, quantity: number = 1) {
    const updatedCart = await commerce.cart.add(productId, quantity);
    setCart(updatedCart.cart);
  }

  async function updateCartItem(lineItemId: string, quantity: number) {
    const updatedCart = await commerce.cart.update(lineItemId, { quantity });
    setCart(updatedCart.cart);
  }

  async function removeFromCart(lineItemId: string) {
    const updatedCart = await commerce.cart.remove(lineItemId);
    setCart(updatedCart.cart);
  }

  async function emptyCart() {
    const updatedCart = await commerce.cart.empty();
    setCart(updatedCart.cart);
  }

  return { cart, addToCart, updateCartItem, removeFromCart, emptyCart };
}

async function generateCheckoutToken(cartId: string) {
  return await commerce.checkout.generateToken(cartId, { type: "cart" });
}

async function captureOrder(checkoutTokenId: string, orderDetails: {
  customer: { firstname: string; lastname: string; email: string };
  shipping: { name: string; street: string; town_city: string; county_state: string; postal_zip_code: string; country: string };
  payment: { gateway: string; stripe: { payment_method_id: string } };
}) {
  const order = await commerce.checkout.capture(checkoutTokenId, orderDetails);
  return order;
}