Fundraising campaigns with card donations, built by Claude Code on Elements
Campaigns with a story, cover photo and live progress bar, card donations on a donor wall, emailed receipts, and updates to donors.
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.
- 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.
Why Elements
Elements is an integrated full-stack app framework and a project server. The project server checks the agent's work as it builds: it type-checks the server and browser code, analyzes the program, applies migrations and runs the tests, then reports the results to the agent. A security mistake, such as calling a server-only function from the browser, is a compile error. The agent reads the report and fixes its own mistakes before it tells you a feature is done. The same checks run on every feature you ask for next.
Run it yourself
- 1 Sign up
Already have an account? Sign in
- 2 Install and run the demo One prompt to paste into your agent.
The prompt
What Claude was given to build this app.
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.