loading...
Cover image for I made a game to help people learn the notes on their guitar. It's free and mobile-friendly šŸŽø

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

mustapha profile image Mustapha Aouas 惻Updated on 惻2 min read

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:
pwa score

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?

Buy Me A Coffee


Discussion

pic
Editor guide
Collapse
jawwad22 profile image
jawwad22

waiting for Android App

Collapse
tommely profile image
Tommely

Seems to be a nice one. Now I really want to try it out and find out how actually effective it is

Collapse
sarneeh profile image
Jakub Sarnowski

Wow! I've been looking for something like this :) Thanks!

Collapse
mustapha profile image
Mustapha Aouas Author

Glad to hear that. If you have any feedback send me a text or open an issue on Gh šŸ˜ƒ

Collapse
dyland profile image
Dylan Davenport

This is awesome!! Iā€™d love to contribute to the project! Forking now šŸ˜

Collapse
isaacbatst profile image
Isaac Batista

just awesome

Collapse
mustapha profile image