TL;DR: I wanted to learn next.js and I also wanted to solve for a problem we often have at Sunday morning worship: shifting keys last minute! So I messed around for a couple of evenings and made a fast, installable web app that transposes chord charts, shows capo‑friendly shapes, pops open chord diagrams, prints, and has a big Stage Mode (which anyone can use if you have an iPad on stage) for rehearsals. It’s live: guitar-transposer.vercel.app.
Why build this?
Every guitarist eventually ends up with three problems:
- “This song is too high… can we do it in G?”
- “What shape should I play if the capo’s on 2?”
- “Can I get a clean print for the gig?”
I wanted one place to paste a chart, change keys, get capo guidance, and print/share it—without the usual formatting chaos.
What’s inside
- Simple transposing (type/paste → pick From/To).
- Capo helper with live “play shapes in …” hint.
- Clickable chords → diagrams (multiple voicings, including barre).
- Print / Save PDF with a clean header and optional diagrams.
- Stage Mode: big text, high contrast, and a subtle highlight across a pair of lines (chords + lyrics) so your eyes don’t wander.
- PWA niceties: offline, Add to Home Screen, and a wake‑lock in Stage Mode so your screen doesn’t sleep mid‑chorus.
- (Still WIP) PDF import for text‑based chord sheets.
Tech stack & a few lessons
- Next.js (App Router) + React + TypeScript
Nice ergonomics, and the server/client boundary is clear once you accept that anything with browser APIs belongs in a client component. - Tailwind v4 for speed.
I kept the UI minimal and readable rather than “dribbblified”. - PWA via next‑pwa
Easy to get wrong; keep runtime caching simple, and treat fonts + static assets as SW‑friendly while pages use stale‑while‑revalidate.
What’s next
- Nashville Numbers / Roman numerals toggle.
- Autoscroll (performance tempo with pause/skip).
- Songbook mode (save multiple charts) if people ask for it.
- Maybe OCR for the PDF importer if people try to throw camera scans at it.
Try it, share it, roast it
- App:
guitar-transposer.vercel.app - If you like it, share it with a bandmate. If you break it, tell me what you did so I can fix it.
- And if you see me capo at 3 playing in E shapes, no you didn’t.
