I made a game to help people learn the notes on their guitar. It's free and mobile-friendly 🎸

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 😁

That's it for this post. I hope you liked it. If you did, please share it with your friends and colleagues. Also you can follow me on twitter at @theAngularGuy as it would greatly help me.

Have a good day !