East Pole Site

← Back to portfolio
Fingerboard Pro
2022

A progressive web app supporting people in their efforts to become a proper double bass player. Specifically for people with limited or no experience in music theory; people who don’t know how to read musical notation, don’t understand the symbols in a lead sheet, and even if they would, have no idea how all of that translates to the upper part of your double bass: the fingerboard.

ArchitectureFirebaseIdeationReactTone.jsVexFlow

Background

This journey began when I took some time off to improve my double bass playing skills. After a few lessons, I felt overwhelmed by music theory. Without any formal music education, trying to understand music theory and relate it to an unfamiliar instrument seemed daunting.

To get a better grip on it, I started writing code that mapped scales to notes, notes to positions on the bass, and notes to staves. As I delved into chord progressions, this project grew into something more substantial, and I began exploring ways to share it with a wider audience.

Fingerboard Pro

The most visible part of the application allows you to pick a key and a particular chord or scale. The app explains the scale, maps the notes on the scale to positions on the fingerboard, and renders the notes on a stave. Pressing the "Play" button plays the notes as they would sound on your bass, highlighting the finger positions and notes being played. Customization panels let you set the tempo and other options to make your practice sessions more interesting or challenging.

The Technology

The application was created as a progressive web app using React and Vite. It relies on Firestore for authentication and trial keys. The help site is hosted on Notion, with pages published using Simple.ink, and a support chat based on Crisp.

What made this interesting

This project was an interesting exercise for several reasons:

  1. It was the first time I worked in total isolation and brought the project to a state where I could release it for alpha testing. I reached out to double bass communities, offering invites for those interested to sign up with a trial key.
  2. The project involved not only coding the app, which greatly enhanced my understanding of music theory, but also creating help pages, demo videos, managing consent and support, and keeping track of the bill of materials.
  3. I discovered that when launching a project, you can manage a lot on free plans. The only costs I incurred were for Sink.in, Notion, Cookiebot, and a domain. (I later realized that Crisp had usage restrictions and the trial expired, but I managed on a free version for a year.)
  4. I needed a way for users to enter a trial by just entering a trial key, while preventing widespread sharing of credentials. I hacked Firebase's authentication mechanism to allow the same credential to be used on three different devices. Once all grants were taken, the trial key could no longer be used. In hindsight, I might have approached it differently, but it was a valuable learning experience in using Firebase this way.