Hi everyone!

I was working these past few weeks on a cool side project, and since I haven't been publishing anything lately, I decided to go ahead and share this with you
Link of the app: https://guitar-fretboard-learning.web.app/

Context

I have been playing guitar for 5 years now and never have I learned the notes of the fretboard correctly. Add to that that I don't have the musical ear so I was playing the notes without knowing which notes I was playing.
So, as any developer that struggles with something, I decided to build an app for that!

Game modes

In this app you can learn the fretboard (guitar notes) either by locating the notes (where) or by identifying them (which). Also, you could explore your fretboard or your favorite scale in any tuning you want.

Locate the note

In this game mode, you have to locate the note on the fretboard and click on it.

Identify the note

In this game mode, you have to identify the note highlighted on the fretboard.

Explore the fretboard

In this game mode, you can explore the fretboard, show or hide the notes as you wish in any tuning.

Stack

I used Angular, Ionic, and Ngxs (state management) to build the app. It's 100% free and open source. here's the link to the repo if you want to have a look into the code or give a star to the repo .

Lighthouse scores:

Future steps

• Unit testing & E2E testing
• Create a user account and track progress
• more game modes
• ...

If you have any feedback or suggestions the DMs are open

Hey, let's stay in touch!

I'm working on a lot of awesome posts and tutorials to come. If you liked this one, make sure to follow me on Twitter or connect with me on LinkedIn to get updated on when the next one might come out.

What to read next?

• CSS Grid: illustrated introduction
• 7 Tips to boost your productivity as a web developer