01
Overview.
Banjo Chords is a chord chart app for 5-string banjo players. Each chord is shown as an SVG fretboard diagram, with a toggle to display note names or finger positions. Players can save chords into named collections, to build progressions or keep track of the chords they’re learning.
Instead of storing chord images, I store each fingering as data and draw it as an SVG, so one component renders every diagram. Note names are calculated from the tuning, and collections are saved in localStorage, so there’s no backend to run.
02
Built with.
03
Challenges.
Challenge
Before
After
Modelling chord data
Chords were separate named constants, so nothing linked C minor to C and a two-step picker wasn’t possible.
Each chord now has a root, quality and list of positions, and the picker builds itself from the data.
Drawing accurate diagrams
Chords played up the neck rendered in the wrong place because fret numbers were treated as grid rows.
Frets are converted relative to the diagram’s starting fret, and I added fret labels and barre shapes.
Saving collections
Collections disappeared on refresh, and a bad stored value could break the whole app.
State loads from localStorage on startup and saves on every change, using immutable updates.
04
The results.
The finished app covers 29 chords and 63 fingerings across all seven root notes, shows notes or finger positions on every diagram, and keeps saved collections between visits on both phone and desktop layouts.
Displaying three positions for a D chord
Save chord to collection
A collection of saved chords