Subscriber-Only Guitar Chord Viewer

Замовник: AI | Опубліковано: 27.02.2026

I need a self-contained Guitar Chord Viewer that drops straight into a members-only WordPress page via shortcode or Gutenberg block. The interface must let users pick a key from the twelve-tone set, choose a chord type from a list of 100 that I will provide, then instantly see at least three authentic fretboard shapes for that chord. Visual requirements • Fretboard rendered with a realistic wood texture rather than a flat line drawing. • Each diagram labels notes, intervals, and suggested fingerings clearly without crowding the layout. • Design stays lightweight so it loads fast on desktop, tablet, and mobile. Core functionality • Two dropdown filters: Key and Chord Type. • Responsive fretboard display that updates live with no page refresh. • Chord data stored in a way that lets me add or edit entries easily—CSV import, custom post type, or another method you suggest. • Works behind my existing subscriber paywall; non-logged visitors should never access the tool. • Clean, documented code so future tweaks are straightforward. Acceptance criteria 1. Selecting any of the 12 keys paired with any of the supplied 100 chord types returns three playable positions. 2. Each position shows note names, interval labels, and finger numbers. 3. Front end matches the wood-grain aesthetic and remains readable on small screens. 4. The viewer installs as a plugin or drop-in code that I can activate on any protected page without breaking other themes or plugins. 5. All functionality demonstrated on a staging site before final hand-over. I like the clarity of all-guitar-chords.com but need only the features outlined above—nothing extra for this first release. If you have experience with interactive fretboard graphics, JavaScript frameworks such as React or Vue, and WordPress plugin development, your approach will fit perfectly. Let me know how you’d structure the data, the toolset you’d choose, and an estimated timeline for delivery of a working prototype followed by the polished version.