Case 02 · 2026
Space Youth GKKK
Volunteers running a church youth ministry
A weekly bulletin that happens to be an admin system, for volunteers who were coordinating a ministry through spreadsheets and group chats. The measurable part of this project is accessibility: the old palette failed WCAG on every line of body text.
- Status
- Live — running in demo data
- My role
- Designed and built it
- Built with
- Next.js 16 · TypeScript · Tailwind v4 · Supabase · ISR on Vercel
(01) The problem
What was actually in the way
A youth ministry runs on rhythm: a midweek meeting, two Saturday services, small groups. The coordination for all of it lived in spreadsheets, chat threads and documents that nobody could find six months later. Who is serving this week, what was decided in the last meeting, where the money went.
The first version I inherited was a generic SaaS landing page wearing cream colours. It described a product. What the people actually needed was to see this week.
And the volunteers are volunteers. If the tool is not pleasant, it goes unused and everything goes back to the group chat.
(02) Decisions
What I chose, and why
01Design the bulletin, not the dashboard
The front page headline is this week's service theme, not the name of the product. The people serving are listed by name and role, because being named is the point of a stewardship roster — not decorative initial circles. A "rhythm of the week" section carries the structure. One dark section gives the page weight so it does not read as an endless scroll of cards.
02Fix the contrast before anything else
The palette I started from failed WCAG AA outright. The muted ink used for all body copy measured 3.57:1 and the caption tone measured 2.20:1 against the paper background. Every foreground token was retuned to clear 4.5:1 against both paper tones. The result was then audited in production rather than asserted: 100 text elements checked, zero failures, worst ratio 4.56:1.
03Three bugs that made the app unusable, not just imperfect
Nine of ten routes returned HTTP 500 whenever the database environment was empty, because middleware asserted non-null on an undefined value on every single request. All dates rendered in the server timezone, so a Saturday evening service could display as Sunday to a user in Jakarta. And the dashboard sidebar was desktop-only, which meant a phone user had no way to move between modules at all. All three are fixed; dates are now pinned to Asia/Jakarta in one place.
04Always render something
The data layer runs dual-mode: real database when configured, seed data otherwise. The site is never a blank error screen. The front page is served from cache with hourly revalidation, so it is fast but "this Saturday" is never more than an hour stale.
05Deliberately not shown
Member detail pages do not display phone numbers, because any signed-in user can open them and those numbers belong to the members, not to the app. The dashboard and login routes are excluded from search engines. Chat exports, member spreadsheets and personal notes are excluded from the deployment entirely.
(03) Result
What is true now
- Ten of ten routes verified returning HTTP 200 in production on 1 August 2026.
- Front page around 300 KB across 13 requests, with fonts self-hosted and no third-party connections at all.
- Accessibility verified by measurement in production, not by claim: skip link, global focus-visible, touch targets of at least 44px, associated labels, clean reflow at 320px, reduced-motion and contrast preferences respected.
(04) Not done
What is unfinished or untrue yet
- The live site is running on seed data. The database is not connected yet — that step needs account access I do not have.
- Forms can add records but cannot yet edit or delete them.
- There are no automated tests. Verification so far has been computed styles and programmatic audits, not screenshots and not a test suite.
- One decision is still open and is not mine to make: once real data is connected, the public front page would show members' real names. That is normal for a bulletin, but it is the ministry's call.
(05) Sources
Where these claims come from
Working documents on my own machine, not marketing copy. Listed so the numbers above can be challenged.