In The Beginning

The problem

In The Beginning ran its volunteer program the way most small nonprofits do: scattered spreadsheets, email threads, and a volunteer photo gallery where every headshot looked different — inconsistent head sizes, mismatched backgrounds, eyes never lining up from one card to the next. There was no single system for intake, review, or publishing, and no one on staff to run one by hand.

Volunteer registration & profile system

I built a multi-step registration flow with server-side validation, honeypot spam protection, rate limiting, and case-insensitive duplicate detection. It supports a full lifecycle — new registration, admin review, approval, profile updates, reactivation — and nothing a volunteer edits goes live unreviewed. Profile changes are staged in a pending_update JSONB column until an admin approves them.

Admin dashboard

A secure admin interface sits behind a signed HMAC session cookie — no third-party auth vendor in the loop. It gives staff a full volunteer management queue (approve, archive, restore, delete), diff visibility on pending profile edits, blog-submission moderation with an editor allowlist, and site settings management, all behind one authentication layer.

The portrait standardization studio

This is the piece I'm proudest of. Every volunteer headshot now gets automatically scaled to a consistent head size with eyes pinned to a fixed vertical position on a branded canvas — entirely in the browser, at zero per-image cost. It uses @imgly/background-removal (WebAssembly) to strip backgrounds client-side and a self-hosted MediaPipe BlazeFace model (229KB) for face detection. The expensive AI step runs once per photo and caches the cutout; the Head Size and Eye Line sliders then recompose the canvas instantly on every tick, redrawing from the cached cutout instead of rerunning detection. Admins can auto-standardize in bulk, manually crop against an eye-line alignment guide, convert HEIC files through a server fallback, or replace just the background at native resolution — with defaults saved per admin.

The org had been eating into a paid image API (remove.bg) with 49 of 50 free calls sitting unused in production. Moving the whole pipeline to free, unlimited in-browser WebAssembly eliminated that cost entirely — while producing a more consistent result than the paid API had.

Blog submissions

Members submit posts through a public form; submissions land in a moderation queue. Editors — allowlisted by email and PIN — publish approved posts directly. Archived posts are restorable; deleted posts are permanent.

Engineering decisions worth mentioning

Server-side HEIC-to-WebP conversion via heic-convert and sharp, with a 10MB body limit on server actions — processed images go to Supabase Storage while the originals are preserved separately for non-destructive re-editing. Postgres runs with Row Level Security; the service role key never leaves the server, and the anon key is strictly read-only on the public frontend. A Vercel cron job pings /api/keep-alive on a schedule to stop the free-tier database from pausing.

One production bug took real digging: volunteer profile submissions were silently failing because writes to a column that didn't exist — updated_at — were failing quietly. I diagnosed it by querying the live schema directly through the Supabase REST API rather than guessing from the code.

Impact

A fragmented manual process became a structured digital workflow for intake, profile management, and content publishing — and every volunteer portrait now carries a consistent visual identity, with no ongoing cost and no manual editing effort.