Rostergrove: volunteer shift signup for a community food bank
Volunteers pick up shifts with live spots left, waitlists and day-before reminders; coordinators set weekly shifts, check people in and export hours.
Agent specs
- Agent
- Claude Code, Opus 5.5 Medium
- Time
- 18 min
- Cost
- $5.88*
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-rostergrove scaffold: cd ~/elements/projects elements create rostergrove -scaffold=elementscode/demo-rostergrove cd rostergrove Start the app.
How it's built
Rostergrove needed shifts with spots that count down as volunteers sign up, waitlists that move people up, day-before reminders, check-in and an hours report for the coordinator. Each of those is a part of Elements, so the agent spent its 18 minutes on the food bank's roster itself.
What Elements gave the app
- Live spots and rosters. Shifts, signups and the coordinator's roster are LiveTables. Spots left change the moment someone signs up, and the roster fills in and checks off as people arrive.
- Waitlists that move people up. Signing up locks the shift first, so the last spot goes to exactly one volunteer and a full shift puts the next one on the waitlist. When someone with a spot leaves, whoever has waited longest is confirmed.
- Day-before reminders. A one-line cron schedule runs a job every hour that emails each confirmed volunteer the day before their shift, in the food bank's time zone, and marks each one as sent.
- Weekly shifts and hours. A coordinator adds a shift once or every week for a set number of weeks, and downloads each volunteer's checked-in hours for the year as a CSV.
- Server calls as function calls. Signing up, leaving, check-in and cancelling a shift call server functions straight from the page with
@rpc. - Data and roles from SQL. Migrations define the roster and seed one coordinator, fifteen volunteers, sixteen weeks of past shifts with hours served and two weeks of upcoming shifts with signups. Sessions and roles give coordinators check-in and the admin pages.
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 31 tests pass. Every page works on desktop and phone.
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 rostergrove cd rostergrove Start the app, then build this: Build a volunteer scheduling app named rostergrove for a community food bank. VOLUNTEER - Sign up with name, email and phone. - Browse upcoming shifts (sorting, packing, delivery driver) with date, time, location, and spots left. - Sign up for a shift or drop one. A shift that is full shows a waitlist. - A reminder email the day before. - Their hours served this year. COORDINATOR (admin account) - Create shifts, one-off or repeating weekly, with the number of volunteers needed. - Each shift's roster, with check-in on the day. - Shifts that are short of volunteers, highlighted. - Export volunteer hours as CSV. Seed one coordinator, fifteen volunteers, two weeks of shifts with signups, and past hours. Show the seeded logins on the sign-in page. Spots left and rosters update in real time.
Comments· 0