Raisemeter: a fundraising site for community causes
Campaigns with a story, cover photo and live progress bar, card donations on a donor wall, emailed receipts, and updates to donors.
Agent specs
- Agent
- Claude Code, Opus 5.5 Medium
- Time
- 17 min
- Cost
- $5.66*
Agents work faster and more accurately on Elements.
* Cost at API rates, September 2026.
Run it yourself
Paste this prompt into your AI agent. You get the finished app on your own machine, ready to change however you like.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app from the elementscode/demo-raisemeter scaffold: cd ~/elements/projects elements create raisemeter -scaffold=elementscode/demo-raisemeter cd raisemeter Start the app.
How it's built
Raisemeter needed campaign pages with a story and a cover photo, card donations, a progress bar and donor wall that move as gifts arrive, emailed receipts and updates to donors. Each of those is a part of Elements, so the agent spent its 17 minutes on the campaigns themselves.
What Elements gave the app
- A live meter and donor wall. Donations are a LiveTable, one view per campaign. When a gift is recorded, every open campaign page moves its progress bar and adds the donor's name and message to the wall, and the donor's email stays on the server.
- Donations by card. A donor picks an amount and pays through Stripe. The gift is recorded when the donor returns and again when Stripe's webhook arrives, once either way. Until a Stripe key is added, an in-app test checkout stands in and records the gift the same way, and in production the app registers its own webhook on the first checkout.
- Cover photos and stories. An organizer uploads a cover photo straight from the campaign form and it is stored in the database. Stories and updates are written in Markdown.
- Background work. A job emails each donor a receipt once the gift is saved, and another sends an organizer's update to every donor as their own email.
- Server calls as function calls. Donating, creating a campaign, posting an update and searching call server functions straight from the page with
@rpc. - Data and roles from SQL. Migrations define the site and seed two organizers, four campaigns at different stages, their donations and updates. Sessions keep each campaign's dashboard and its donations export with its organizer.
What the project server gave the agent
The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.
What shipped
The app type-checks with zero errors and all 38 tests pass. Every page works on desktop and phone. A real sandbox payment went through Stripe end to end.
The code
Build it from scratch
To watch your agent build this app from an empty project, use the prompt we used instead. It takes longer than starting from the finished app above.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app: cd ~/elements/projects elements create raisemeter cd raisemeter Start the app, then build this: Build a fundraising site named raisemeter for community causes. ORGANIZER - Sign up, create a campaign: title, story (markdown), cover photo, goal. - Post updates to the campaign, emailed to its donors. - See donations and download them as CSV. DONOR - A campaign page: cover, story, a progress bar toward the goal, number of donors, and a wall of recent donations with names and messages. - Donate any amount by card, with a name (or anonymous) and a message. - A thank-you email with a receipt. Home page: featured campaigns and a search. Payments by Stripe. Seed two organizers, four campaigns with cover photos at different stages toward their goals, and donations with messages. Show the seeded logins on the sign-in page. The progress bar, donor count and donation wall update in real time.
Comments· 0