Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

A New Guitar Fretboard Visualization App - Fretastic

By Gary simon - Mar 02, 2020

Long time since I've written an article here! I've been very focused on the YouTube channel, so my time here has been obviously very sparce in the last couple years.

However, despite being busy with YouTube, I was recently able to launch a PWA (Progressive Web App) for guitar players. I'm quite an avid guitar player myself, so I came up with the idea out of necessity.

The app is: Fretastic - A Free Interactive Guitar Fretboard App (Note: It's still very much in beta at the time of writing this!)

Below, I'll discuss what it does and how we built it.

What is Fretastic?

Fretastic allows guitar players to quickly and easily visualize scales, chords, triads and arpeggios.

It also has a built-in backing track player that pulls in videos from YouTube, which are categorized into musical genres, key and scale. When a user choose a backing track, it shows a draggable and resizable thumbnail of the video, and it sets the fretboard in the right key and scale. This gives the user the ability to learn chords, scales, 3 notes per string (3nps) and CAGED fingering patterns for lead guitar playing.

Guitar players can also add, remove and change string tunings. 

The fretboard can be controlled to show notes, scale degrees (or none). They can also toggle triads, showing all notes on or off, and root notes.

There are also loads of guitar scales and chords with even more coming soon.

Why Build it?

In the past, when searching for chord or scale diagrams, users either had to rely on low quality photos, or very outdated websites with poor user interfaces. Being a UI/UX guy, I thought I could do much better -- and we feel we did! I've brought on a partner who's great at coding who was able to take on my --less than ideal code base-- and drastically improve it!

Going forward, we have many other ideas that will really make this a great tool for both guitarists and guitar teachers.

The Stack Used

Initially, I used Vue.js to create the app. But we quickly realized we needed SSR (server side rendering) so we converted it to a Nuxt app. 

We haven't yet introduced user accounts, but we will shortly with the help of Google Firebase. The user accounts initially will be free, as non-registered users will have limited access to all of the features. To access all features, users will have to create a free account.

On top of that, we're hosting the site on Heroku, which makes deployment a breeze!

The app is also a PWA, which means users can install it on their android and iOS devices. In the future, we will likely create native app alternatives for the app/play stores. 


Share this post

Say something about this awesome post!