Add Products: DynamoDB table, pre-seeded swag, API endpoint, UI page + dropdown

- terraform: products table with 6 pre-seeded LocalStack swag items
- order_handler: GET /products endpoint
- index.html: Products nav section with table; order form uses product dropdown
- index.html: fulfilled orders show S3 receipt download link in detail row

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: whummer

01-serverless-app/lambdas/order_handler/handler.py

@@ -8,9 +8,10 @@
 dynamodb = boto3.resource("dynamodb")
 sqs = boto3.client("sqs")
 
-TABLE_NAME = os.environ["ORDERS_TABLE"]
-QUEUE_URL = os.environ["ORDERS_QUEUE_URL"]
-DLQ_URL   = os.environ.get("ORDERS_DLQ_URL", "")
+TABLE_NAME     = os.environ["ORDERS_TABLE"]
+PRODUCTS_TABLE = os.environ["PRODUCTS_TABLE"]
+QUEUE_URL      = os.environ["ORDERS_QUEUE_URL"]
+DLQ_URL        = os.environ.get("ORDERS_DLQ_URL", "")
 
 class DecimalEncoder(json.JSONEncoder):
     def default(self, o):
@@ -34,6 +35,9 @@ def handler(event, context):
     if method == "POST" and path.endswith("/replay"):
         return replay_dlq()
 
+    if method == "GET" and "/products" in path:
+        return list_products()
+
     if method == "GET":
         return list_orders()
 
@@ -56,6 +60,16 @@ def replay_dlq():
     }
 
 
+def list_products():
+    table = dynamodb.Table(PRODUCTS_TABLE)
+    items = sorted(table.scan().get("Items", []), key=lambda x: x.get("name", ""))
+    return {
+        "statusCode": 200,
+        "headers": {**CORS_HEADERS, "Content-Type": "application/json"},
+        "body": json.dumps(items, cls=DecimalEncoder),
+    }
+
+
 def list_orders():
     table = dynamodb.Table(TABLE_NAME)
     result = table.scan()

01-serverless-app/terraform/main.tf

@@ -18,6 +18,41 @@ provider "aws" {
 
 # ── DynamoDB ──────────────────────────────────────────────────────────────────
 
+resource "aws_dynamodb_table" "products" {
+  name         = "products"
+  billing_mode = "PAY_PER_REQUEST"
+  hash_key     = "product_id"
+
+  attribute {
+    name = "product_id"
+    type = "S"
+  }
+}
+
+locals {
+  products = [
+    { product_id = "ls-tshirt",      name = "LocalStack T-Shirt",    description = "Classic logo tee",             price = "24.99" },
+    { product_id = "ls-hoodie",      name = "LocalStack Hoodie",     description = "Warm & cloud-native",          price = "49.99" },
+    { product_id = "ls-cap",         name = "LocalStack Cap",        description = "Keep the sun off your stack",  price = "19.99" },
+    { product_id = "ls-mug",         name = "LocalStack Mug",        description = "Fill it with local coffee",    price = "14.99" },
+    { product_id = "ls-stickers",    name = "Sticker Pack",          description = "10 cloud-native stickers",     price = "4.99"  },
+    { product_id = "ls-socks",       name = "LocalStack Socks",      description = "Deploy faster on your feet",   price = "9.99"  },
+  ]
+}
+
+resource "aws_dynamodb_table_item" "products" {
+  for_each   = { for p in local.products : p.product_id => p }
+  table_name = aws_dynamodb_table.products.name
+  hash_key   = aws_dynamodb_table.products.hash_key
+
+  item = jsonencode({
+    product_id  = { S = each.value.product_id }
+    name        = { S = each.value.name }
+    description = { S = each.value.description }
+    price       = { N = each.value.price }
+  })
+}
+
 resource "aws_dynamodb_table" "orders" {
   name         = "orders"
   billing_mode = "PAY_PER_REQUEST"
@@ -74,7 +109,7 @@ resource "aws_iam_role_policy" "lambda_policy" {
       {
         Effect   = "Allow"
         Action   = ["dynamodb:PutItem", "dynamodb:UpdateItem", "dynamodb:GetItem", "dynamodb:Scan"]
-        Resource = aws_dynamodb_table.orders.arn
+        Resource = [aws_dynamodb_table.orders.arn, aws_dynamodb_table.products.arn]
       },
       {
         Effect   = "Allow"
@@ -140,6 +175,7 @@ resource "aws_lambda_function" "order_handler" {
   environment {
     variables = {
       ORDERS_TABLE     = aws_dynamodb_table.orders.name
+      PRODUCTS_TABLE   = aws_dynamodb_table.products.name
       ORDERS_QUEUE_URL = aws_sqs_queue.orders.url
       ORDERS_DLQ_URL   = aws_sqs_queue.orders_dlq.url
     }
@@ -307,6 +343,44 @@ resource "aws_api_gateway_integration" "options_order_handler" {
   uri                     = aws_lambda_function.order_handler.invoke_arn
 }
 
+resource "aws_api_gateway_resource" "products" {
+  rest_api_id = aws_api_gateway_rest_api.orders_api.id
+  parent_id   = aws_api_gateway_rest_api.orders_api.root_resource_id
+  path_part   = "products"
+}
+
+resource "aws_api_gateway_method" "get_products" {
+  rest_api_id   = aws_api_gateway_rest_api.orders_api.id
+  resource_id   = aws_api_gateway_resource.products.id
+  http_method   = "GET"
+  authorization = "NONE"
+}
+
+resource "aws_api_gateway_method" "options_products" {
+  rest_api_id   = aws_api_gateway_rest_api.orders_api.id
+  resource_id   = aws_api_gateway_resource.products.id
+  http_method   = "OPTIONS"
+  authorization = "NONE"
+}
+
+resource "aws_api_gateway_integration" "get_products_handler" {
+  rest_api_id             = aws_api_gateway_rest_api.orders_api.id
+  resource_id             = aws_api_gateway_resource.products.id
+  http_method             = aws_api_gateway_method.get_products.http_method
+  integration_http_method = "POST"
+  type                    = "AWS_PROXY"
+  uri                     = aws_lambda_function.order_handler.invoke_arn
+}
+
+resource "aws_api_gateway_integration" "options_products_handler" {
+  rest_api_id             = aws_api_gateway_rest_api.orders_api.id
+  resource_id             = aws_api_gateway_resource.products.id
+  http_method             = aws_api_gateway_method.options_products.http_method
+  integration_http_method = "POST"
+  type                    = "AWS_PROXY"
+  uri                     = aws_lambda_function.order_handler.invoke_arn
+}
+
 resource "aws_api_gateway_resource" "orders_replay" {
   rest_api_id = aws_api_gateway_rest_api.orders_api.id
   parent_id   = aws_api_gateway_resource.orders.id
@@ -363,6 +437,8 @@ resource "aws_api_gateway_deployment" "orders_api" {
       aws_api_gateway_integration.options_order_handler.id,
       aws_api_gateway_integration.post_replay_handler.id,
       aws_api_gateway_integration.options_replay_handler.id,
+      aws_api_gateway_integration.get_products_handler.id,
+      aws_api_gateway_integration.options_products_handler.id,
     ]))
   }
 
@@ -372,6 +448,8 @@ resource "aws_api_gateway_deployment" "orders_api" {
     aws_api_gateway_integration.options_order_handler,
     aws_api_gateway_integration.post_replay_handler,
     aws_api_gateway_integration.options_replay_handler,
+    aws_api_gateway_integration.get_products_handler,
+    aws_api_gateway_integration.options_products_handler,
   ]
 }
 

01-serverless-app/website/index.html

@@ -255,6 +255,9 @@ <h1>Order Processing Pipeline</h1>
     <div class="nav-item active" onclick="showSection('orders')" id="nav-orders">
       <span class="nav-icon">📦</span> Orders
     </div>
+    <div class="nav-item" onclick="showSection('products')" id="nav-products">
+      <span class="nav-icon">🛍️</span> Products
+    </div>
     <div class="nav-item" onclick="showSection('about')" id="nav-about">
       <span class="nav-icon">ℹ️</span> About
     </div>
@@ -269,8 +272,10 @@ <h1>Order Processing Pipeline</h1>
         <h2>New Order</h2>
         <form id="order-form">
           <label>
-            Item
-            <input type="text" id="item" placeholder="e.g. LocalStack T-Shirt" required />
+            Product
+            <select id="item" required style="padding:0.5rem 0.75rem;border:1px solid #ddd;border-radius:6px;font-size:0.9rem;width:240px;background:#fff;">
+              <option value="">Loading products…</option>
+            </select>
           </label>
           <label>
             Quantity
@@ -308,6 +313,25 @@ <h2>Orders</h2>
       </div>
     </div>
 
+    <!-- Products section -->
+    <div class="section" id="section-products">
+      <div class="card">
+        <h2>Products</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Price</th>
+            </tr>
+          </thead>
+          <tbody id="products-body">
+            <tr><td colspan="3" class="empty">Loading…</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
     <!-- About section -->
     <div class="section" id="section-about">
       <div class="card">
@@ -471,6 +495,7 @@ <h2>API Endpoint</h2>
     document.querySelectorAll(".nav-item").forEach(n => n.classList.remove("active"));
     document.getElementById("section-" + name).classList.add("active");
     document.getElementById("nav-" + name).classList.add("active");
+    if (name === "products") loadProducts();
     if (name === "about" && !mermaidRendered) {
       mermaid.run({ nodes: document.querySelectorAll(".mermaid") });
       mermaidRendered = true;
@@ -509,15 +534,15 @@ <h2>API Endpoint</h2>
       { label: "Pending",    ts: o.created_at,    desc: "Order received, queued for processing" },
       { label: "Validating", ts: o.validating_at, desc: "Checking order details" },
       { label: "Payment",    ts: o.payment_at,    desc: "Processing payment" },
-      { label: "Fulfilled",  ts: o.fulfilled_at,  desc: "Receipt stored in S3" },
+      { label: "Fulfilled",  ts: o.fulfilled_at,  desc: o.fulfilled_at ? `Receipt stored in S3 — <a href="${window.location.origin}/order-receipts/receipts/${o.order_id}.json" target="_blank" style="color:#084298;">download</a>` : "Receipt stored in S3" },
       { label: "Failed",     ts: o.failed_at,     desc: "Processing error — message routed to DLQ" },
     ].filter(s => s.ts);
 
     const stepHtml = steps.map(s => `
       <div class="detail-item">
         <span class="detail-label">${s.label}</span>
         <span class="detail-value ts">${fmt(s.ts)}</span>
-        <span style="font-size:0.72rem;color:#888;">${s.desc}</span>
+        <span style="font-size:0.72rem;color:#888;">${s.desc || ""}</span>
       </div>`).join("");
 
     const meta = `
@@ -611,7 +636,6 @@ <h2>API Endpoint</h2>
       const data = await res.json();
       flash.className = "flash success";
       flash.textContent = `Order placed! ID: ${data.order_id}`;
-      document.getElementById("item").value = "";
       document.getElementById("quantity").value = "1";
       loadOrders();
     } catch (err) {
@@ -661,11 +685,45 @@ <h2>API Endpoint</h2>
     }
   });
 
+  // ── Products ──────────────────────────────────────────────────────────────
+
+  let productsCache = [];
+
+  async function loadProducts() {
+    try {
+      const res = await fetch(`${API}/products`);
+      productsCache = await res.json();
+
+      // Populate order form dropdown
+      const sel = document.getElementById("item");
+      sel.innerHTML = productsCache.map(p =>
+        `<option value="${escHtml(p.name)}">${escHtml(p.name)} — $${Number(p.price).toFixed(2)}</option>`
+      ).join("");
+
+      // Populate products table
+      const tbody = document.getElementById("products-body");
+      if (productsCache.length) {
+        tbody.innerHTML = productsCache.map(p => `
+          <tr>
+            <td><strong>${escHtml(p.name)}</strong></td>
+            <td style="color:#666;font-size:0.85rem;">${escHtml(p.description)}</td>
+            <td style="font-family:monospace;">$${Number(p.price).toFixed(2)}</td>
+          </tr>`).join("");
+      } else {
+        tbody.innerHTML = '<tr><td colspan="3" class="empty">No products found.</td></tr>';
+      }
+    } catch (e) {
+      document.getElementById("products-body").innerHTML =
+        '<tr><td colspan="3" class="empty">Error loading products.</td></tr>';
+    }
+  }
+
   // ── Init ──────────────────────────────────────────────────────────────────
 
   checkChaos();
   setInterval(checkChaos, 5000);
   loadOrders();
+  loadProducts();
 </script>
 </body>
 </html>