GetNotes Web App

To help me with memorizing guitar scales and their chords, I built a web app using Flask and Vue that can generate notes on the fretboard on-demand.

👉 Read directly at

Work date:

Project Overview

This project was built using the following technologies

Type Frontend Backend Hosting Design Audience
Vue Client Vue 2 N/A Figma Musicans
Flask API N/A Python 3 Heroku OpenAPI Developers


Uses a Flask backend to help calculate major/minor notes.

  • Path

    • /scales/<major|minor|pentatonic>/<note>
  • Get

    • Returns a json object of chord tones for the key

For example, GET request URL:

You will receive a list of notes for the key of D Minor.

["D", "E", "F", "G", "A", "Bb", "C"]

Pro Tip: Use Ctrl+Shift+C to open up the console, then paste the following GET statement, and watch the magic happen.

JS Example

fetch("").then(function (
) {
  if (response.ok) {
    response.json().then(function (json) {
      console.log(json); // prints ["D", "E", "F", "G", "A", "Bb", "C"]


I built the client in Vue. It's a simple app the has two main components: a guitar neck with optional number of frets, and a piano with buttons. Clicking on any note on the guitar or piano will make a request to the backend to get the chord tones for that note. There is also the ability to specify a particular chord type. By default, it highlights the desired chord tones on the neck, and it assumes Major.

Default view shows an guitar neck and piano notes

Design and UX

I used Figma to mock-up the design because I wanted to explore more with what the different features that Figma has to offer. I've always used in the past but was curious learning new design tools.


Both the guitar and piano update to reflect the current scale

Updated view after the C note has been selected

Scales update when new piano key is selected. Sharpe notes are highlighted.

Get Notes default layout

Modalities for popular scales

Get Notes scales

Settings Menu

Get Notes setings