EveryChord.io

• This app will display an interactive menu chord with a piano to learn how to play them ! 🎹 You can :
• search for a chord and change roots using the interactive chord wheel 👍
• learn and hear the chord you chose and learn how to play it on the menu and piano 🎹 🎶
• (you might have to wait a bit and refresh the page when accessing the web app 😞 i'm using a free host)

For the Devs (and curious ones)

• /server is the express server (backend) used for storing and computing the chords and notes played 🧠 🏭
• /client is the React app (frontend) uses the server to get the chords and notes and display them to the user 👨‍🎓 🎹 🎵
• The proxy is used to resolve Same-Origin Policy and HTTP access control (CORS) issues. (see client/package.json)

Installation

• npm install this will install everything needed for the client and the server
• you might want to have two terminals for this:
  • server terminal: cd server && npm start
  • client terminal: cd client && npm start

Build

• npm install
• npm run build this will build the React client
• npm run start:prod this will make the node server use this build

Handy stuffed used 🙏 🫂

• Piano React Component
• sampler
• midi-note source