I took guitar lessons when I was younger. But I never took it seriously. I never practiced with dedication. Over the years I always wanted to learn guitar again. I also took lessons again (more of a fixed course) when I started working, we had a band, played in front of an audience, but it soon died down. I’d say I’m somewhere between a campfire guitarist and a second guitarist in a folk band. While I can play most chords for songs and simple melodies, when it comes to improvisation and ear training my skills are almost 0.

Recently I’ve been planning to dedicate some time to learning again (3rd time lucky, I hope). I’ve also planned to take lessons with a teacher on a weekly basis. My goal is to get better at improvisation. I want to be able to play melodies effortlessly without thinking. To do this, you really need to know your fretboard well. This means knowing which notes on the fretboard are on which frets/strings.

Learning the fretboard is similar to typing on a keyboard. You can type on the keyboard by looking for individual letters and moving your fingers to the correct position. With time and practice you will get faster. Eventually, you don’t need to look at the keyboard to guess where the characters are, your mind builds a map and you can subconsciously move your fingers to where you want them. This is strange, because if someone asked you where the fourth letter in the third row was, your mind would draw a blank. But if I asked you where ‘V’ is on the keyboard, you would immediately think of its position.

I remember learning the keyboard by taking some touch-typing lessons online and this was really effective. So I was on the lookout for something similar for the guitar fretboard. I eventually found this video:

How To MEMORIZE Your Guitar FRETBOARD: The No-Nonsense Exercise That Actually Works

The comments are really positive. That gives me hope! Basically it is a series of exercises to learn the notes on the guitar fretboard. I decided to give it a try. The first exercise was to pick a random note and play it up and down the strings. I really got stuck on ‘random’ so I had to pick random notes one at a time and make sure I covered all the notes from A-G. This means taking notes, writing down what I’ve done and picking another random note.

This seemed like a simple enough project to build a web application. I’m a backend developer, so how hard can it be? As long as I stay away from CSS, I should be fine, right? I know some Javascript. This should be easy.

So I started with vanilla JS because I didn’t see why I needed something like React. But soon I realised that using React is much more productive, it has:

  1. Better frameworks (NextJS).
  2. Components that I could easily use (ChakraUI).
  3. Easy deployment strategies (Cloudflare).

Overall, I really liked the DX of using NextJS, especially for someone who isn’t used to writing JS day in and day out. It was easy to pick up. Also, using chakra-ui made it a lot easier with readily available components. I struggled a bit with flexbox and grid at first, but eventually got the hang of it.

Introducing: Frettie, it is a simple web application to help you learn the guitar fretboard. It is still in its infancy. I hope to add more functionality with time. There are still a number of improvements to be made:

  1. Make it mobile friendly.
  2. Add an internal metronome (I tried to use ToneJS but it wasn’t that easy, if you know how to make it work, please contact me).
  3. Add more guitar tools? Maybe something for learning scales?

Anyway, it’s a start.

This is post 004 of #100DaysToOffload.