I built Hymnal, a full-stack web application that brings the traditional church songbook into the digital age. It’s a searchable, accessible platform for gospel music with features that go far beyond a static song list.
What It Does
Hymnal lets congregations and worship leaders browse, search, and display gospel hymn lyrics with optional sheet music — rendered live in the browser from ABC notation. Users can submit new songs to the community library, and worship leaders can create real-time collaborative sessions where an entire congregation follows along on their own devices.
Technical Highlights
- Full-Stack Architecture: Next.js 16 App Router with TypeScript, server-side rendering for SEO-critical lyrics pages, and co-located API routes
- Database & Auth: PostgreSQL via Supabase with Prisma ORM, row-level security policies, and Supabase Auth for user management
- Full-Text Search: PostgreSQL
pg_trgmtrigram extension for fuzzy search across song titles, lyrics, and metadata - Sheet Music Rendering: ABCjs renders ABC notation to SVG in-browser — no pre-generated images or PDFs required
- AI-Powered Duplicate Detection: Two-phase pipeline using trigram pre-filtering followed by Claude API deep comparison to prevent duplicate song submissions
- Real-Time Singing Sessions: Supabase Realtime channels (WebSocket) power collaborative sessions where a host controls the display and participants follow along in sync
- Drag-and-Drop Queue: Session song queues with
@dnd-kitfor intuitive reordering - QR Code Session Joining: Participants scan a QR code to instantly join a live session
- Accessibility First: WCAG 2.1 AA compliant — semantic HTML, keyboard navigation, screen reader support, adjustable font sizes, and
prefers-reduced-motionrespect
Architecture Decisions
The real-time session system uses a host-authoritative model: the host’s browser is the source of truth, broadcasting state deltas over Supabase Realtime channels. There’s no server-side session state to manage, which keeps the architecture simple and the hosting costs at zero on Supabase’s free tier.
AI duplicate detection only fires when the database pre-filter finds plausible matches (trigram similarity > 0.3), keeping Claude API costs near zero while still catching duplicates that simple string matching would miss.
Infrastructure
- Hosting: Vercel (Next.js) + Supabase (database, auth, realtime, storage)
- Email: Resend for transactional emails
- CI/CD: Auto-deploy on merge to
main, preview deployments per PR - Database Migrations: Prisma Migrate with tracked migration history
This project showcases end-to-end product development — from database schema design and real-time infrastructure to AI integration and accessibility-first frontend engineering.