Scales on Fretboard

A fretboard with a scale representation along the fret
  • Construction icon
    Work In Progress
  • Date icon
    Date: Apr 21, 2019
  • Question mark icon
    Description: Creation of an interface to learn scales on a fretboard
  • Label icon
    Type: Frontend development
  • Tools icon
    Tools: VSCode, React, SASS, webpack, Passion for music, Bass Guitar, Guitar, Ukulele
  • Link icon
    Github link

What’s the goal?

I’m musician since I was a teenager. I play bass guitar and sometimes I like to pick my acoustic guitar or my Ukulele.

The problem I have and I try to solve with this project is my capacity to learn scales. There are a lot of courses online and I have several books with exercises. I also took some courses with a friend to learn the basics. Even with that, I cannot learn scales easily. So I decided to create a web interface that allows me to select the scale I want to learn with the instrument I want and that gives me the full scale on a dynamic fretboard.

What’s in the box?

First of all I was inspired by Tom Jane aka Kodemonki. He made something that fits almost all my needs.

So I planned to take some of his code to tweak some part and create a new version of it. It was more difficult than I thought and maybe somewhere I broke the system. It works very well when it comes to display scales but modes are breaking in some case.

That’s why this project is a work in progress, I have to fix it. For now all the system is written in React but I thought to rewrite it in Vue. I’ve started working with Vue at work and I’m loving it.

Instruments

For now the available instruments are:

  • Bass guitar 4 strings standard tunning GDAE
  • Bass guitar 5 strings standard tunning GDAEB
  • Bass guitar 6 strings standard tunning CGDAEB
  • Guitar 6 strings standard tunning EBGDAE

Scales

For now the available scales are:

  • Major scale
  • Natural minor scale
  • Harmonic minor scale
  • Melodic minor scale
  • Blues scale

What’s the plan?

I will create the whole system from scratch in Vue and I will also create a better interface with some cool styles and I will add features progressively.