GetNotes Web App

Project Overview

This project was built using the following technologies

API

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: https://getnotes-api.herokuapp.com/scales/minor/D

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("https://getnotes-api.herokuapp.com/scales/minor/D").then(function (
  response
) {
  if (response.ok) {
    response.json().then(function (json) {
      console.log(json); // prints ["D", "E", "F", "G", "A", "Bb", "C"]
    });
  }
});

Front-End

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.

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 draw.io in the past but was curious learning new design tools.

Screenshots

Both the guitar and piano update to reflect the current scale

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

Modalities for popular scales

Settings Menu