What was broken
Volunteers were paying out of pocket for event supplies and then not claiming it back. Paper forms, manual lookups of treasurer contact details, photographing receipts and pasting them into emails — every step added friction, and friction meant reimbursements that should have happened didn't. The treasurer ended up chasing volunteers who'd already paid for things, because nobody had told her she owed them money.
What I built
A single-page web app. The volunteer scans a QR code at the venue, lands on a phone-shaped page with their name and department already filled in (remembered from last time via localStorage). They tap one button to take a photo of the receipt or upload a file, hit Send, and a structured email lands in the treasurer's inbox with the receipt attached.
No login, no account, no app store. The full flow takes about ten seconds.
How I built it
Three deliberate phases.
Phase one, just the design with hardcoded data and no logic — the page exists, it looks right, nothing works yet.
Phase two, real interactivity but no email — the camera opens, files preview, localStorage remembers, the success screen appears, but nothing leaves the device.
Phase three, the Resend API connection that actually sends the email with the receipt as an attachment.
This sequencing matters. Building the design first against fake data forces you to be honest about what the system needs to feel like before you commit to making any of it work. By the time phase three lands, you already know the shape of the system — you're just connecting the last wire.
How the 3-layer pattern shows up here
The directive is the spec — what the volunteer sees, what the treasurer receives, what the success state looks like. Orchestration is the React state machine that decides when to remember someone, when to show an error, when to reset the form. Execution is the camera API, the file picker, localStorage, and Resend's send-mail endpoint.
Each layer hands off to the next without doing the next layer's job.
Tech
React, localStorage for persistence, Resend for email, Vercel for hosting. No backend, no database, no user accounts.
Why it matters for an ops team
Most ops problems aren't broken systems — they're missing ones. Reimbursements weren't failing because the process was wrong; they were failing because there was no process, just an expectation that volunteers would do something inconvenient on their own time.
The fastest fix wasn't a better form, it was removing the form entirely and replacing it with a ten-second flow that meets people where they are. CS Ops and RevOps work the same way: the wins come from spotting the missing process, not optimising the existing one.
What I'd do differently
Should have added duplicate detection. If a volunteer accidentally submits the same receipt twice — easy to do on a phone with shaky hands — the treasurer gets two emails and has to remember which one was real. Server-side dedupe on receipt hash plus a "you already submitted this today" check on the client would have cost an evening and saved a real headache later.