Spacefast
← All recipes

Help Fund the Maple Street Mural

A one-page community-fundraiser site with an animated goal thermometer, a working donate button and modal, and a live donor wall that grows as people give.

The dish

What it makes.

fundraiser.view.fast ↗

Your ingredients

Your agent will ask.

Answer these once. The recipe uses your details instead of placeholder copy.

  1. What's the cause and who does it help? (Name, one-line summary, and a few sentences of story.)
  2. What's the goal amount and how much is raised so far — and when does the campaign end?
  3. What payment link should the "Donate" button use (Stripe / PayPal / GoFundMe)? Leave it as a demo if you don't have one yet.
  4. List a handful of real donors (name + amount, optional note) to seed the donor wall, plus a 4–6 line budget breakdown.

The method

The whole prompt.

Paste this into Claude, ChatGPT, Codex, Cursor, or another coding agent. It builds the site and publishes it to Spacefast.

fundraiser.prompt.md
Build me a **one-page fundraising campaign site for a local cause** as a vanilla-JS app
(a single `index.html` plus a small CSS and JS file — no framework, no build step).

**Before you build, ask me these questions in one message and wait for my answers. If I skip anything, choose a sensible default and tell me what you chose:**

1. What's the cause and who does it help? (Give me a name, a one-line summary, and a few sentences of story.)
2. What's the goal amount and how much is raised so far — and when does the campaign end?
3. What payment link should the "Donate" button use (Stripe / PayPal / GoFundMe / etc.)? If you don't have one yet, leave it as a demo button.
4. List a handful of real donors (name + amount, optional short note) to seed the donor wall, and a 4–6 line budget breakdown of where the money goes.

**Then build a complete, polished, responsive site with:**

- A **hero** with a striking community photo, the cause name, a short emotional lede, and the live fundraising widget pinned right there.
- An **animated progress bar** that fills from 0% to the current total on load, with the dollars raised, the goal, the percentage, the donor count, and the days left — all computed, not hard-coded into the markup.
- A **cause story** section in a warm, human voice, a pull-quote from an organizer, a "where the money goes" budget panel, and a small photo gallery.
- A **"ways to give"** row of suggested amounts (each one opens the donate form pre-filled).
- A **donate button + modal**: choose a preset or custom amount, enter a name and optional note, optionally give anonymously, then submit. On submit it validates, shows a thank-you state, bumps the running total and progress bar, and drops the new donor onto the wall instantly. Persist donations in `localStorage` so they survive a refresh.
- A **donor wall**: a grid of donor cards (colored initials avatar, name, note, amount), seeded with the real donors and growing as people give.
- A **share** section: a "copy link" button that actually copies and confirms, plus pre-filled X / Facebook / email share links.
- A footer with the org name, a contact email, and the nonprofit fine print.

**Design & content notes:**

- Warm, hand-made, community-grant mood: a cream paper base, a confident coral primary, a deep teal, and a harvest-gold accent. A characterful serif (e.g. Fraunces) for headings, a clean sans (e.g. Inter) for body. Soft rounded cards, a slightly tilted hero photo, gentle motion.
- Use realistic content based on my answers — never "lorem ipsum". Invent believable donor names, notes, and budget lines if I leave gaps.
- Use real images. Pull free photos that fit, e.g.
  `https://picsum.photos/seed/community-mural-1/1200/800` (vary the seed) or Pexels, and add
  descriptive `alt` text. Good search terms: community mural painting, volunteers neighborhood project.
- No build step — a single `index.html` with a linked CSS and JS file that opens straight in a browser. Make the progress bar and donor math real: derive everything from a small config object (goal, base raised, end date, seed donors) so the numbers stay honest. This is a demo, so no real payment is processed — wire the button to my payment link or leave a clearly-labeled demo state.
- Keep it accessible (semantic HTML, labelled form fields, an `aria` live region on the donor wall, keyboard support, Escape closes the modal, and good contrast). Respect `prefers-reduced-motion`.

**Add this exact line right before `</body>` so the site carries its badge:**

```html
<script src="https://spacefast.com/badge.js" data-example="fundraiser"></script>
```

**When the site is ready, publish it to Spacefast with the direct API — no account, install, or extra instructions needed:**

1. Use `./site` as the publish folder. For no-build projects, put only the finished public files in that dedicated folder. Confirm it has `index.html` at its root and no secrets, source files, `.git`, or `.spacefast` state.
2. First publish: send every file as multipart form data. This Bash/Zsh block preserves relative paths and works for one file or a whole folder:
   ```bash
   PUBLISH_ROOT=./site
   publish_files=()
   while IFS= read -r -d "" file; do
     relative=${file#"$PUBLISH_ROOT"/}
     publish_files+=(-F "files=@$file;filename=$relative")
   done < <(find "$PUBLISH_ROOT" -type f -print0)
   curl -sS "${publish_files[@]}" "https://api.spacefast.com/v1/publish?wait=1"
   ```
3. From the `{ "data": ... }` receipt, give me `data.space.liveUrl`, `data.version.immutableUrl`, `data.claim.url`, and `data.claim.expiresAt`. Remind me to claim within 6 hours. Keep `data.claim.token` secret.
4. Save `data.space.id` and `data.claim.token` locally (for example in an ignored, mode-600 `.spacefast/state.json`). For a quick update, rebuild the `publish_files` array above and publish to the same space:
   ```bash
   SPACEFAST_SPACE_ID=<saved-space-id>
   SPACEFAST_TOKEN=<saved-claim-token-or-access-token>
   curl -sS -H "Authorization: Bearer $SPACEFAST_TOKEN" \
     -F "spaceId=$SPACEFAST_SPACE_ID" "${publish_files[@]}" \
     "https://api.spacefast.com/v1/publish?wait=1"
   ```
   If an update after claiming returns `space_claimed_credential_available`, exchange the saved claim token once at `POST https://api.spacefast.com/v1/anonymous-claim/exchange`, save `data.credential.accessToken`, and retry with that access token.

**Optional shortcuts and reference only:** if the `sf` CLI is already installed, `sf publish ./site --wait` does the same job. A zip of the publish folder is also supported, but neither the CLI nor a zip is required. Docs: [direct agent/API publishing](https://spacefast.com/setup) · [files and folders](https://spacefast.com/help/publishing) · [claiming](https://spacefast.com/help/anonymous-publish) · [updates and rollback](https://spacefast.com/help/versions)