Guitar-poet.com | Guitar Planet

About Fretty

The Story Behind Fretty

Hello, everyone!

I decided to start developing Fretty back around 2015. The motivation was pragmatic: I was working as a guitar teacher and needed an online interactive tool to demonstrate visual music theory on the fretboard, helping students—especially children—understand and learn guitar basics.

As a web developer, I saw an opportunity to build my own application to explore music theory from an analytical and mathematical perspective. At the same time, writing the code for this guitar fret app served as my own learning sandbox for modern programming.

As the saying goes, “everything is always in development.” In 2021, I consolidated and stored the codebase in a dedicated Bitbucket repository to prepare it for future evolution.

Managing and modernizing a full-fledged application as a solo developer is a significant challenge, but I continue to push it forward step by step. Thank you for your support and understanding!

Key Features & Capabilities

  • Fretboard Visualization: Map notes, chords, scales, and harmonic structures directly on an interactive virtual fretboard.
  • Interactive Customization: Adjust fret numbers, guitar body visibility, chord roots, chord types/suffixes, and switch visual color themes.
  • Chord Diagrams & Music Notation: Render custom chord diagrams (via SVGuitar / Chordic) and sheet music / MusicXML formats (via OpenSheetMusicDisplay).
  • Audio Playback: Audition mapped notes and chord arrangements directly in your browser.

Architecture & Technology

  • Next.js & React 19: Re-architected from legacy Webpack / Create React App to Next.js with Turbopack and React 19.
  • Zustand State Management: Refactored to a lightweight Zustand store (useFretStore) for fast, decoupled UI state.
  • Client-First & Static Export: Configured for static export (output: 'export'), ensuring high performance and full portability.
  • Vector Interface (SVG & <foreignObject>): Dynamic coordinate mapping with responsive CSS rotation for mobile and desktop screens.
  • NPM Package (@wind177/fretty): Published as a standalone library dynamically loaded on guitar-poet.com without SSR to prevent hydration issues.

Future Vision: EdTech & Hardware

Fretty is designed with music education in mind. The long-term vision includes integrating the web application with a physical Fretty Guitar Robot—a hardware/AI module designed to physically show and play chords for children during music lessons.