02Recreation
Aldenvale Anesthesia Group
A practice site where patients read about their procedure and request their medical records for a fee: fifteen public routes, a physics-driven 3D badge and a payment flow that keeps card data out of the form.
- Public routes, each with its own title, description and canonical
- 15
- PDFs per request: a full report and a redacted receipt
- 2
/
/request-patient-records
What I built
- Fifteen public routes, plus two unlisted ones kept out of the sitemap.
- 3D badge on a lanyard, simulated with React Three Fiber and Rapier.
- Records flow for patients and offices: card payment, uploads, generated PDFs and email previews.
Engineering notes
Card data stays out of the form
Card inputs never enter the FormData. They are validated locally and swapped for a token that carries only the brand and the last four digits.
Charge first, then everything else
The amount is computed on the server. If the charge fails, nothing is recorded; once it succeeds, uploads, PDFs and emails are best-effort, so a paid request is never lost.
What runs in demo mode
- Payments are simulated: 4111 1111 1111 1111 approves and 4000 0000 0000 0002 declines.
- Emails are shown in a sandboxed preview instead of being sent.