🎸 Guitar Fretboard Notes

A visual learning tool for beginner guitarists. This interactive app displays notes on a guitar fretboard and their corresponding positions on the musical staff. It helps users quickly understand and memorize where each note is located on the instrument and how to play it.

---

✨ Features

• 🎵 Visual fretboard with labeled notes
• 🎼 Real-time note mapping to the musical staff
• ✅ Clean interface designed for beginners
• 🧠 Great for learning note positions and practicing reading sheet music
• 🖱️ Clickable notes for easy exploration and learning

---

📸 Demo

👉 Live Demo
(hosted via GitHub Pages)

---

🛠️ Built With

• ⚛️ React – UI library
• ⚡ Vite – Fast development and build tooling
• 🟦 TypeScript – Static typing
• 🎧 Tone.js – Sound synthesis
• 🎨 SCSS – Styling

---

🚀 Getting Started

Clone the repo and install dependencies:

git clone https://github.com/r3mus99/guitar-fretboard-notes.git
cd guitar-fretboard-notes
npm install
npm run dev

---

📁 Project Structure

src/
├── components/ # React components
├── assets/ # Images, styles, etc.
├── utils/ # Helper functions
├── App.tsx # Root component
└── main.tsx # Entry point

---

🧑‍🎓 Ideal For

• Beginner guitarists
• Music teachers and students
• Anyone learning note positions and reading sheet music

---

📃 License

MIT License – use freely and contribute!

---

🙌 Contributing

Pull requests are welcome! If you'd like to suggest improvements or fix bugs, feel free to fork the repo and open a PR.

---

👤 Author

Made with ❤️ by @r3mus99