Raisemeter: a fundraising site for community causes

Raisemeter: a fundraising site for community causes

00 Markdown

Campaigns with a story, cover photo and live progress bar, card donations on a donor wall, emailed receipts, and updates to donors.

Run it yourself

Get the finished app on your own machine, ready to change however you like.

VS Code Command Palette⇧⌘P
raisemeter -scaffold=elementscode/demo-raisemeter

Press 'Enter' to confirm your input or 'Escape' to cancel

Press ⇧⌘P in VS Code and choose Elements: New App. Then paste this line and press Enter.

New to Elements? Install Elements first.

The code

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.

Comments· 0

Join the community

Get a weekly digest of new posts.

Sign up