react-fretboard-diagram

A React component to build SVG fretboard diagrams

Strings numbering

For the user: strings are numbered starting at 1 and from the lowest pitched to the highest pitched.

Implementation: strings are in an array 0-index.

Frets numbering

Frets are numbered starting at 0 and from the head of the neck towards the bridge.

Fret number 0 is the nut, or the "zero fret" installed close the the nut on certain guitars.

Interval display

Intervals can be displayed in two forms:

• full interval: 11
• simplified interval: 4

"P" and "M" are omitted.

TODO

• Display stacked intervals

• Color schemes

  • colors for intervals

• Type checking:

  • Flow or TypeScript. Go with Flow if possible.

• Make sure react-router is not build into the component because it is only used by the sample-app.

• Allow overriding of the display options per Shape. For example, on the same diagram, one shape could be displayed with notes and another shape could be displayed with intervals.

• Font:

  • Nunito
  • PT Sans Narrow
  • Quicksand
  • Dosis
  • Varela Round

Never forget:

Optimize Later - Premature optimization is the root of all evil. The most important function of computer code is to communicate the programmer's intent to a human reader. Any coding practice that makes your code harder to understand in the name of performance is a premature optimization.

Apply the Robustness principle - Be liberal in what you accept, and conservative in what you send