Here is my sign-up API's Cloudflare Worker, src/index.js, and its wrangler.jsonc: (then paste both files) I want to turn it into a complete app. The Worker should also serve the sign-up web page (index.html, style.css and script.js in a folder named public), so the page and the API share one address. The page lists the shifts with spots left and lets a member sign up with their email. After signing up, the page should remember the cancel code in the browser, so the member can see their sign-ups and cancel one later from the same browser.send

Nice, your API already does the right things (server-side member check, capacity check, unique constraint, no emails in responses). To add the page, you mostly need new files plus one change to wrangler.jsonc. Your src/index.js doesn't need to change at all.

1. wrangler.jsonc: tell Wrangler about the public folder

{
  "name": "garden-signups",
  "main": "src/index.js",
  "compatibility_date": "2026-09-01",
  "assets": {
    "directory": "./public"
  },
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "garden-signups",
      "database_id": "paste-the-id-from-wrangler-d1-create"
    }
  ]
}

A caveat: Cloudflare's static assets feature (the assets key) is fairly new, and I'm not fully certain of every configuration detail (for example, exactly how it decides whether a request goes to a static file or to your Worker code when there could be ambiguity). What I understand is: files in public are served automatically, and any request that doesn't match a file there falls through to your Worker's fetch handler. That should work fine here, since /shifts, /shifts/6, /signups/3 etc. don't match any filename in public. But please test with npx wrangler dev and try both a page load and an API call before trusting it, and check the current Wrangler docs for assets if anything behaves oddly.

One nice side effect: because the page and the API now share one address, you won't run into CORS problems.

2. public/index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Garden Shift Sign-Up</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Garden Shift Sign-Up</h1>

<h2>Upcoming shifts</h2>
<table id="shifts-table">
  <thead>
    <tr><th>Date</th><th>Task</th><th>Time</th><th>Spots left</th></tr>
  </thead>
  <tbody id="shifts-body"></tbody>
</table>

<h2>Sign up</h2>
<form id="signup-form">
  <label for="shift-select">Shift</label>
  <select id="shift-select"></select>

  <label for="email-input">Email</label>
  <input type="text" id="email-input">

  <button type="submit">Sign up</button>
</form>
<p id="signup-message"></p>

<h2>My sign-ups (this browser)</h2>
<ul id="my-signups-list"></ul>
<p id="cancel-message"></p>

<script src="script.js"></script>
</body>
</html>

This is plain HTML: a table for the shift list, a form with a drop-down (select) and an email box, and a list for "my sign-ups." script.js runs at the end so the elements above it already exist in the DOM.

3. public/style.css

body {
  font-family: sans-serif;
  margin: 2rem;
  max-width: 40rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
}

th, td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

label {
  display: block;
  margin-top: 0.5rem;
}

button {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
}

4. public/script.js

// where the browser remembers this member's cancel codes
const STORAGE_KEY = "gardenSignups"

// --- elements on the page ---
const shiftsBody = document.querySelector("#shifts-body")
const shiftSelect = document.querySelector("#shift-select")
const form = document.querySelector("#signup-form")
const emailInput = document.querySelector("#email-input")
const signupMessage = document.querySelector("#signup-message")
const mySignupsList = document.querySelector("#my-signups-list")
const cancelMessage = document.querySelector("#cancel-message")

// --- reading and writing the browser's own storage ---
function loadMySignups() {
  const text = localStorage.getItem(STORAGE_KEY)
  if (text === null) {
    return []
  }
  return JSON.parse(text)
}

function saveMySignups(signups) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(signups))
}

// --- getting the shift list from the API ---
async function loadShifts() {
  const response = await fetch("/shifts")
  if (!response.ok) {
    throw new Error("Could not load shifts")
  }
  return response.json()
}

// turns the array of shifts into an object, so we can look one up by id
function shiftsById(shifts) {
  const lookup = {}
  shifts.forEach(shift => {
    lookup[shift.id] = shift
  })
  return lookup
}

// --- building the parts of the page ---
function renderShiftsTable(shifts) {
  shiftsBody.textContent = "" // clear old rows first
  shifts.forEach(shift => {
    const spotsLeft = shift.capacity - shift.spotsFilled
    const row = document.createElement("tr")
    row.innerHTML = `
      <td>${shift.date}</td>
      <td>${shift.task}</td>
      <td>${shift.start}–${shift.end}</td>
      <td>${spotsLeft}</td>
    `
    shiftsBody.appendChild(row)
  })
}

function renderShiftOptions(shifts) {
  shiftSelect.textContent = ""
  shifts.forEach(shift => {
    const spotsLeft = shift.capacity - shift.spotsFilled
    const option = document.createElement("option")
    option.value = String(shift.id)
    option.textContent = `${shift.date} ${shift.task} (${spotsLeft} left)`
    if (spotsLeft <= 0) {
      option.disabled = true
    }
    shiftSelect.appendChild(option)
  })
}

function renderMySignups(signups, lookup) {
  mySignupsList.textContent = ""
  if (signups.length === 0) {
    const li = document.createElement("li")
    li.textContent = "No sign-ups saved in this browser yet."
    mySignupsList.appendChild(li)
    return
  }
  signups.forEach(signup => {
    const shift = lookup[signup.slotId]
    const li = document.createElement("li")
    const label = shift === undefined
      ? `Shift #${signup.slotId}`
      : `${shift.date} — ${shift.task} (${shift.start}–${shift.end})`
    li.textContent = label + " "
    const button = document.createElement("button")
    button.textContent = "Cancel"
    button.addEventListener("click", () => cancelSignup(signup))
    li.appendChild(button)
    mySignupsList.appendChild(li)
  })
}

// --- pulling it all together ---
async function refreshPage() {
  const shifts = await loadShifts()
  renderShiftsTable(shifts)
  renderShiftOptions(shifts)
  const lookup = shiftsById(shifts)
  renderMySignups(loadMySignups(), lookup)
}

// --- signing up ---
form.addEventListener("submit", async (event) => {
  event.preventDefault()
  signupMessage.textContent = ""
  const slotId = Number(shiftSelect.value)
  const email = emailInput.value.trim()
  if (email === "") {
    signupMessage.textContent = "Enter an email address"
    return
  }
  const response = await fetch(`/shifts/${slotId}/signups`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ email })
  })
  const data = await response.json()
  if (!response.ok) {
    signupMessage.textContent = data.error
    return
  }
  const signups = loadMySignups()
  signups.push({ id: data.id, slotId: data.slotId, cancelCode: data.cancelCode })
  saveMySignups(signups)
  signupMessage.textContent = "Signed up. This browser will remember your cancel code."
  emailInput.value = ""
  await refreshPage()
})

// --- cancelling ---
async function cancelSignup(signup) {
  cancelMessage.textContent = ""
  const response = await fetch(`/signups/${signup.id}`, {
    method: "DELETE",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ cancelCode: signup.cancelCode })
  })
  if (response.status === 204) {
    const remaining = loadMySignups().filter(s => s.id !== signup.id)
    saveMySignups(remaining)
    await refreshPage()
    return
  }
  const data = await response.json().catch(() => ({}))
  cancelMessage.textContent = data.error ?? "Could not cancel"
}

refreshPage()

Walking through the pieces:

• loadMySignups / saveMySignups read and write a JSON array in localStorage, which only this browser can see.
• loadShifts fetches /shifts (same address as the API, since they now share an origin).
• shiftsById turns the array into a lookup object, like the bed-by-ID lookup you've used before.
• The two render... functions clear out old content (textContent = "") and rebuild it from the current data, using forEach to create one row/option/list item per shift or sign-up.
• refreshPage is the one place that reloads everything: it's called once when the page loads, and again after a successful sign-up or cancel, so the page always reflects the latest data.
• The submit handler prevents the normal form submission, POSTs the email to the right shift, and — only if the server says it worked — saves the returned cancelCode to localStorage.
• cancelSignup DELETEs the sign-up, and only removes it from localStorage if the server actually confirms it with a 204.

Who can see this, and what data

Anyone who has the Worker's URL can open this page. It shows the shift schedule (date, task, time, capacity and spots filled) — no member emails or personal data appear anywhere in the API responses or the page. To sign up, a visitor types an email, which the server checks privately against your members table; it never echoes other people's emails back.

The cancel code is stored only in localStorage on that one visitor's browser. That means: - It won't show up if they open the page on a different device or browser, or after clearing site data — they'd need the cancel code itself to cancel from elsewhere (your API doesn't have a way to recover it otherwise). - Anyone else using the same browser/computer could see the "My sign-ups" list and cancel those shifts, since localStorage isn't tied to a login.

That matches what you asked for, but it's worth being aware of as a limitation, not a bug.

Testing and deploying

1. Run npx wrangler dev from the project folder and open the local address it prints. Confirm the page loads, the shift table and drop-down fill in, sign-up works, and the new sign-up shows up under "My sign-ups."
2. Try cancelling one, and confirm it disappears from the list and the spots-left count goes back up after a refresh.
3. When you're happy, run npx wrangler deploy to publish it for real.