guitarragrams v1

project//September 23, 2018

Earlier this year, I was studying chord patterns and wrote them into a document. This was a PITA to update, so I made a web app out of it. I took this opportunity to learn some tech, so I jumped on the Vue bandwagon. I found that the Vue CLI tools didn’t get in my way, and the Vue documentation made for a gentle learning curve.

Tools used

VueJS as the main framework

Process

With this project, I needed to figure out two things, and all the hard stuff was finished in one afternoon:

Data format for the chord diagrams. I laid it out in a few JSON files here.
Vue component scheme. I settled for four components here:
- ChordGroup
- FretboardDiagram
- FretboardMarker
- PatternGroup

Results

Take a look at Guitarragrams
For more info, check out the project repository at github

I’m happy with this project! I still use it from time to time when I want to play around with chord voicings.