{"id":20507395,"url":"https://github.com/ridwansharkar/fretboard-explorer","last_synced_at":"2026-04-22T09:02:50.851Z","repository":{"id":257450695,"uuid":"857819824","full_name":"RidwanSharkar/Fretboard-Explorer","owner":"RidwanSharkar","description":"Interactive Music Theory Explorer \u0026 Visualizer + MIDI made with React ","archived":false,"fork":false,"pushed_at":"2024-12-29T05:53:29.000Z","size":95854,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-16T08:16:51.095Z","etag":null,"topics":["guitar-chords","midi","music-theory","oop","react"],"latest_commit_sha":null,"homepage":"https://fretboardx.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RidwanSharkar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-15T17:33:56.000Z","updated_at":"2024-12-29T05:53:32.000Z","dependencies_parsed_at":"2024-09-16T21:16:34.206Z","dependency_job_id":"707d2553-915e-4686-9888-f20df0ff66bd","html_url":"https://github.com/RidwanSharkar/Fretboard-Explorer","commit_stats":null,"previous_names":["ridwansharkar/fretboard-x","ridwansharkar/fretboard-explorer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RidwanSharkar%2FFretboard-Explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RidwanSharkar%2FFretboard-Explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RidwanSharkar%2FFretboard-Explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RidwanSharkar%2FFretboard-Explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RidwanSharkar","download_url":"https://codeload.github.com/RidwanSharkar/Fretboard-Explorer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242111340,"owners_count":20073433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["guitar-chords","midi","music-theory","oop","react"],"created_at":"2024-11-15T20:13:48.973Z","updated_at":"2026-04-22T09:02:50.845Z","avatar_url":"https://github.com/RidwanSharkar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎸 Fretboard Explorer v3.0\n*An interactive React application for guitarists to learn and explore music theory. Combining visual fretboard mapping, intelligent chord generation algorithms, and real-time MIDI playback, this tool helps musicians discover chord voicings, understand harmonic relationships, and master the guitar fretboard through an intuitive, color-coded interface based on the Circle of Fifths.*\n\n**LINK: https://ridwansharkar.github.io/Fretboard-Explorer/**\n\n## 📜 Overview:\n\n**Fretboard Explorer** bridges the gap between music theory and practical guitar playing by algorithmically generating all physically playable chord fingerings for any chord in any key.\n\n![Fretboardx](https://github.com/user-attachments/assets/c3515850-8987-48e9-89f7-4e2d84e0c55b)\n\n### Key Features:\n- **🧮 Intelligent Chord Discovery:** Select any chord from the Circle of Fifths and instantly visualize all notes across the 6-string, 16-fret board. Advanced algorithms compute hundreds of valid fingering positions based on real-world playability constraints (finger stretch, fret spacing, string accessibility).\n\n- **🔍 Manual Fret Selection \u0026 Chord Recognition:** Click individual frets to build your own chords. The app automatically identifies the chord you've created and highlights all instances of those notes across the entire fretboard.\n\n- **🔄 Chord Progression Generator:** Generate musically sophisticated progressions ranging from simple 3-4 chord loops to complex 5-8 chord phrases. Includes 70+ progression types spanning multiple genres and styles:\n  - **Modal Progressions:** Dorian, Phrygian, Lydian, Mixolydian\n  - **Borrowed Chords:** Modal interchange from parallel major/minor keys\n  - **Secondary Dominants:** V7/ii, V7/V, and other tonicizations\n  - **Tritone Substitutions:** Jazz harmony with ♭II7 dominant substitutes\n  - **Blues Forms:** 12-bar blues, minor blues, blues turnarounds\n  - **Gospel/Neo-Soul:** Rich extended voicings with 9ths and 13ths\n  - **Cinematic Progressions:** Epic 6-8 chord arcs for film/trailer music\n  - Features advanced voice leading algorithms that optimize smooth transitions across all chord changes\n\n- **🎹 Real-Time MIDI Synthesis:** Hear exactly what you see. Powered by Tone.js, each chord voicing plays through a realistic guitar synthesizer with pluck dynamics, reverb, compression, and delay effects that mimic authentic guitar tone.\n\n- **🎼 Music Theory Integration:** Built-in Circle of Fifths interface with 24 key signatures (12 major + 12 minor), dynamic color theming per key, intelligent 7th/9th chord logic, and scale degree relationships that help you understand harmonic progressions intuitively.\n\n- **🪉 Advanced Chord Customization:** Toggle between standard triads, 7th chords, and 9th extensions. Navigate through multiple voicings with Next/Prev controls to find the perfect fingering for your playing style and song context.\n\n- **🎨 Educational Design:** Color-coded notes, interval labeling, and visual feedback make complex music theory concepts accessible for beginners while providing powerful tools for advanced musicians exploring jazz voicings and extended harmonies.\n\n- **💾 Tab Saving \u0026 Export:** Save your generated progressions as guitar tablature. The \"Save Tab\" button captures your entire progression with proper fret numbers, making it easy to reference and practice later.\n\n### How It Works:\nThe application uses a backtracking algorithm to recursively search through all possible note combinations on the fretboard, validating each potential chord shape against ergonomic constraints. When you select \"C Major 7\", the system calculates the notes (C-E-G-B), finds every instance across the fretboard, then generates all valid 4-note combinations that a human hand can actually play—typically yielding 200-400 unique voicings to explore.\n\n---\n\n## Using Controls: \n- **Chord Discovery (Row 1):** Click any chord name button to display all its notes across the fretboard. You can specify chord qualities (7th/9th) before pressing **'Find'** to generate all playable voicings. Row 2 buttons under the chord names will play a random chord of the key's scale degree to explore quick \nrelationships.\n\n- **Manual Selection:** Click the **'Select'** button (crosshair icon) to enter manual mode. Click individual frets to build a chord; the app will automatically identify it and find its notes everywhere on the board.\n\n- **Progression Generator:** Click the **'GEN'** button after selecting any chord to create a musical progression. The system generates progressions ranging from simple 3-4 chord loops to sophisticated 5-8 chord phrases, including:\n  - Modal progressions (Dorian, Mixolydian, Lydian, Phrygian)\n  - Borrowed chords and modal interchange\n  - Secondary dominants and tritone substitutions\n  - Blues, gospel, and cinematic progressions\n  - All optimized for smooth voice leading with minimal finger movement\n\n- **Save Progressions:** Click the **'Save Tab'** button after generating a progression to capture the tablature. The system exports the entire chord sequence with fret numbers for easy reference.\n\n- **Navigation \u0026 Playback:** Use **'Next'** and **'Prev'** arrows to explore different voicings of a chord. Click the progression display panel to replay a generated sequence.\n\n- **Key Exploration (Row 2):** Buttons under the chord names play random chords from the current key's scale degrees to help you explore harmonic relationships. \n\n![image](https://github.com/user-attachments/assets/44774bcd-434e-4faf-bea0-37ddf467547b)\n\n---\n\n## Basic Design:\n\n- An array of all of the notes in the western scale [A, A#, B, C, C#, D, D#, E, F, F#, G, G#] are iterated through to extract the correct notes from the appropriate chord formula. For instance, the C Major chord consists of 1-3-5, or C-E-G, and will be highlighted upon user selection.\n\n- Each chord belongs to a set of chords: [ I ii iii IV V VI Vii ] that form a 'key', all twelve of which are implemented as buttons on the Circle of Fifths for the user to explore.\n\n- Once chord notes are displayed, an algorithm will determine which combinations of these available notes within the selected chord can be considered a \"valid chord\", meaning that they are actually physically playable on the guitar in real life. This involves eliminating the possibility of more than one note per string, or that no 2 notes be 5 frets apart (for instance, depending on the length of your fingers). Various chord customization parameters, such as \"no open notes\", or \"don't skip strings\" are available as well.\n\n![image](https://github.com/user-attachments/assets/ae259107-9a44-4978-a5e8-812b6b81cd02)\n\n---\n\n## Technical Architecture:\n\n### Tech Stack\n- **Frontend Framework:** React 18.3+ with TypeScript for type-safe component development\n- **Build Tool:** Vite for fast development and optimized production builds\n- **Audio Engine:** Tone.js for MIDI synthesis and audio playback with realistic guitar effects\n- **Styling:** Custom CSS with dynamic theming based on musical key selection\n- **Deployment:** GitHub Pages for static site hosting\n\n### Core Data Structures\n```typescript\n// Guitar fretboard represented as a 2D array\nGuitarNote[][] = [\n  [{ string: 0, fret: 0, name: 'E' }, ...],  // 6 strings\n  ...                                          // 16 frets each\n]\n\n// Chord positions stored as coordinate arrays\nChordPosition[] = [\n  { string: 0, fret: 3 },\n  { string: 1, fret: 2 },\n  ...\n]\n```\n\n---\n\n## Core Algorithms:\n\n### 1. Fretboard Generation Algorithm\nThe fretboard is algorithmically constructed using standard guitar tuning (E-A-D-G-B-E) and chromatic scale mathematics:\n\n```typescript\n// Standard tuning array indexed by string\nconst notes = ['E', 'B', 'G', 'D', 'A', 'E'];  // High to Low\nconst semitones = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n\n// For each string, calculate note at each fret using modular arithmetic\nfretboard[string][fret].name = semitones[(noteIndex + fret) % 12]\n```\n\nThis creates a complete 6-string × 16-fret matrix where every position knows its string number, fret number, and note name.\n\n### 2. Chord Formula System\nMusical chords are defined by their interval patterns (semitone distances from the root note):\n\n```typescript\nchordFormulas = {\n  major:      [0, 4, 7],      // Root, Major 3rd, Perfect 5th\n  minor:      [0, 3, 7],      // Root, Minor 3rd, Perfect 5th\n  major7:     [0, 4, 7, 11],  // + Major 7th\n  minor7:     [0, 3, 7, 10],  // + Minor 7th\n  dominant7:  [0, 4, 7, 10],  // Major triad + Minor 7th\n  diminished: [0, 3, 6],      // Root, Minor 3rd, Diminished 5th\n  // ... and more complex voicings\n}\n```\n\nWhen a user selects C Major, the algorithm:\n1. Finds C's position in the chromatic scale (index 3)\n2. Applies the major formula [0, 4, 7]\n3. Calculates: C (3+0), E (3+4), G (3+7) via modulo 12 arithmetic\n4. Highlights all instances of C, E, and G across the entire fretboard\n\n### 3. Chord Fingering Discovery (Backtracking Algorithm)\nThe most complex algorithm finds all physically playable chord voicings using recursive backtracking with validation constraints:\n\n**Algorithm Flow:**\n```\n1. Start with empty fret array: [-1, -1, -1, -1, -1, -1]\n2. For each note in chord formula:\n   3. Try placing note on each string/fret combination\n   4. Validate constraints:\n      - No string used twice\n      - Fret span ≤ 4 frets (playable by human hand)\n      - String span ≤ 4 strings (reachable finger stretch)\n   5. If valid, recurse to next note\n   6. If all notes placed, save chord voicing\n   7. Backtrack and try next possibility\n```\n\n**Validation Rules:**\n```typescript\n// Maximum fret distance between any two fingers\nMath.abs(currentFret - otherFret) \u003c= 3\n\n// Maximum string distance to avoid awkward stretches  \nMath.abs(maxString - minString) \u003c= 3\n```\n\nThis generates hundreds of valid voicings for complex chords (e.g., ~300+ for C Major 7), which users can cycle through with Next/Prev buttons.\n\n### 4. Circle of Fifths Implementation\nThe Circle of Fifths is implemented as a key relationship graph with programmatically positioned buttons and dynamic hover states:\n\n**Key Relationships:**\n- Each key maintains a lookup table of related keys with their scale degrees\n- Major/minor pairs are positioned using trigonometry (radius × cos/sin)\n- Hover effects highlight related keys based on scale degree relationships (IV, V, ii, vi, etc.)\n\n**Musical Logic:**\n```typescript\n// Calculate scale degrees for selected key\npattern = isMinor ? [0, 2, 3, 5, 7, 8, 10]    // Natural minor intervals\n                  : [0, 2, 4, 5, 7, 9, 11]    // Major scale intervals\n\n// Chord qualities per degree\ntypes = isMinor ? ['minor', 'diminished', 'major', 'minor', 'minor', 'major', 'major']\n                : ['major', 'minor', 'minor', 'major', 'major', 'minor', 'diminished']\n```\n\n### 5. Manual Chord Identification\nWhen a user selects frets manually, the system identifies the chord by:\n1. Collecting all unique note names from the selected frets.\n2. Testing these notes against every possible root (A-G#) and chord formula (Major, Minor, 7th, etc.).\n3. Calculating a \"match score\" based on how many notes from the formula are present.\n4. If multiple matches occur, the most musically logical one is selected (preferring simpler triads or standard extensions).\n\n### 6. Advanced Chord Progression System\nThe progression generator implements professional music theory with 70+ progression templates across multiple categories:\n\n**Progression Types \u0026 Musical Intent:**\n```typescript\ntype ProgressionIntent = 'loop' | 'phrase' | 'turnaround' | 'cinematic' | 'vamp';\n\n// Loops (3-4 chords): Designed for repetition\n// Phrases (5-8 chords): Create narrative arcs with delayed resolution\n// Turnarounds: Focus on returning to tonic\n// Cinematic: Epic emotional journeys\n// Vamps: Stateful 2-chord patterns\n```\n\n**Advanced Harmonic Techniques:**\n\n1. **Modal Progressions:**\n   - Dorian: `i-IV-i-v` (funk, jazz)\n   - Mixolydian: `I-♭VII-IV` (rock, jam bands)\n   - Lydian: `I-II-V` (bright, film scores)\n   - Phrygian: `i-♭II-i` (Spanish, metal)\n\n2. **Borrowed Chords (Modal Interchange):**\n   ```typescript\n   // Major borrowing from minor:\n   'I-♭VII-IV-I'  // Epic rock progression\n   'I-iv-I'       // Emotional minor subdominant\n   'I-♭VI-♭VII-I' // Cinematic progression\n   \n   // Minor borrowing from major:\n   'i-IV-V'       // Bright resolution\n   'i-I-♭VII'     // Picardy third variation\n   ```\n\n3. **Secondary Dominants:**\n   ```typescript\n   'I-V7/vi-vi'     // Tonicization of relative minor\n   'ii-V7/V-V-I'    // Double dominant (V of V)\n   'I-V7/ii-ii-V-I' // Enhanced jazz turnaround\n   ```\n\n4. **Tritone Substitutions:**\n   ```typescript\n   'ii-♭II7-I'      // Jazz tritone sub (replaces V7)\n   'I-♭II7-I'       // Chromatic approach\n   // Tritone = +6 semitones, maintains dominant7 quality\n   ```\n\n5. **Blues Progressions:**\n   ```typescript\n   'I7-IV7-I7-V7'          // 12-bar blues\n   'i7-iv7-V7'             // Minor blues\n   'I7-VI7-ii7-V7'         // Blues turnaround\n   ```\n\n6. **Gospel \u0026 Neo-Soul:**\n   ```typescript\n   'I-iii-vi-ii-V-I'       // Classic gospel run with 9ths\n   'I-♭III-IV-iv'          // Neo-soul color\n   'IV-iv-I-iii-vi-ii-V'   // Extended gospel phrase\n   ```\n\n7. **Cinematic Progressions (6-8 chords):**\n   ```typescript\n   'i-VI-III-VII-iv-V-i'   // Epic minor arc\n   'I-V-vi-IV-I-♭VII-I'    // Heroic journey\n   'i-♭VII-♭VI-V-iv-i'     // Trailer music\n   ```\n\n**Intelligent Pattern Selection:**\n```typescript\n// Weighted selection based on complexity level\nif (complexity === 'jazz') {\n  // Jazz mode: Advanced + phrase progressions (2x weight)\n  pool = [...basic, ...advanced, ...advanced, ...phrases, ...phrases];\n} else {\n  // Simple mode: Basic patterns + half of phrase progressions\n  pool = [...basic, ...basic, ...intermediate, ...halfPhrases];\n}\n\n// Random selection with 70% chord-positioned, 30% pattern-based\nconst progression = Math.random() \u003c 0.7 \n  ? selectWithChordPosition(selectedChord)\n  : generateFromPattern(selectedChord, complexity);\n```\n\n**Voice Leading Optimization:**\nThe system implements sophisticated voice leading algorithms that work across 3-8 chord progressions:\n\n```typescript\n// Multi-factor scoring for optimal chord transitions\nfunction optimizeVoicings(chords[][]): ChordPosition[][] {\n  for each chord:\n    score = voiceLeadingDistance    // Finger movement (primary)\n          + spanPenalty * 0.2       // Playability (prefer 3-4 fret span)\n          + centerDistance * 0.3    // Position consistency\n          + fullnessBonus           // Prefer 3-4 note voicings\n          - commonTones * 2;        // Reward held notes\n  \n  return pathWithMinimalTotalDistance;\n}\n```\n\n**Fallback Strategies:**\nWhen complex chords (9ths, 11ths, 13ths) can't be fully voiced:\n```typescript\n1. Try full chord with extensions (5-6 notes)\n2. Try base triad (root-3rd-5th)\n3. Generate intelligent fallback:\n   - Simple triad on middle strings\n   - Power chord (root + 5th)\n   - Single root note (rare)\n4. Prefer fuller voicings (3-4 notes) over sparse ones\n```\n\nThis creates smooth, professional-sounding progressions that stay in playable positions while maintaining harmonic complexity.\n\n---\n\n## Music Theory Implementation:\n\n### Comprehensive Harmonic System\nThe app implements professional-level music theory across multiple dimensions:\n\n**Scale Systems:**\n```typescript\n// 6 complete modal scales\nMAJOR_SCALE      = [0, 2, 4, 5, 7, 9, 11];    // Ionian\nMINOR_SCALE      = [0, 2, 3, 5, 7, 8, 10];    // Aeolian\nDORIAN_SCALE     = [0, 2, 3, 5, 7, 9, 10];    // Dorian\nPHRYGIAN_SCALE   = [0, 1, 3, 5, 7, 8, 10];    // Phrygian\nLYDIAN_SCALE     = [0, 2, 4, 6, 7, 9, 11];    // Lydian\nMIXOLYDIAN_SCALE = [0, 2, 4, 5, 7, 9, 10];    // Mixolydian\n```\n\n**Chord Quality Logic:**\n- **Diatonic Chords:** Automatically applies correct quality per scale degree\n  - Major: I, ii, iii, IV, V, vi, vii°\n  - Minor: i, ii°, III, iv, v, VI, VII\n- **Modal Chords:** Adjusts qualities based on modal scale intervals\n  - Dorian: i, ii, III, IV, v, vi°, VII\n  - Mixolydian: I, ii, iii°, IV, v, vi, VII\n- **Borrowed Chords:** Applies alterations from parallel modes\n  - `♭VII, ♭VI, ♭III` from minor to major\n  - `IV, V, I` from major to minor\n\n### Dynamic 7th/9th/13th Extension Logic\nThe app intelligently determines chord extensions based on context:\n\n- **Dominant 7ths:** Automatically applied to V chords (always flatted 7th)\n- **Major 7ths:** Applied to I and IV chords in major keys\n- **Minor 7ths:** Applied to ii, iii, vi chords and all minor key chords\n- **Extended Voicings:** 9ths, 11ths, 13ths applied to gospel/jazz progressions\n- **Context-aware:** The same root note uses different extensions depending on:\n  - Key context (major vs minor)\n  - Modal context (Dorian vs Aeolian)\n  - Progression type (blues, gospel, jazz)\n\n### Key-Based Color Theming\nEach of the 12 major and 12 minor keys has a unique color palette that dynamically updates:\n```typescript\nthemes = {\n  'C': { \n    major: { backgroundColor: '#2e6938', buttonColor: '#54bc6c', ... },\n    minor: { backgroundColor: '#51282c', buttonColor: '#E7717D', ... }\n  },\n  // ... 24 total key-specific themes\n}\n```\n\nCSS variables are updated in real-time when keys change, creating a cohesive visual experience tied to musical mode.\n\n---\n\n## Audio System:\n\n### Multi-Instrument Synthesis Engine\nThe app offers three distinct audio options for different sonic experiences:\n\n#### 1. **Pluck Synth (Tone.js)**\nReal-time synthesized guitar tone with layered audio processing:\n\n**Signal Chain:**\n```\nPluckSynth → Reverb → Compressor → Delay → Output\n    ↓          ↓          ↓          ↓\n  Attack    Room        Dynamic    Echo\n  Noise     Space       Range      Effect\n```\n\n**Features:**\n- **String Simulation:** Karplus-Strong synthesis with attack noise and natural dampening\n- **Dynamic Effects:** Reverb (room space), compression (dynamic range), delay (echo)\n- **Chord Strumming:** Notes staggered by 50ms for realistic strumming\n- **Real-time Synthesis:** Instant playback with no loading time\n\n### Audio Architecture\n**Octave Mapping:**\n```typescript\n// Each string/fret position maps to correct MIDI octave\nstring 0 (E high): E4-E5 range\nstring 1 (B):      B3-B4 range\nstring 2 (G):      G3-G4 range\nstring 3 (D):      D3-D4 range\nstring 4 (A):      A2-A3 range\nstring 5 (E low):  E2-E3 range\n```\n\n**Playback System:**\n- **Sample Loading:** Tone.js Sampler loads audio files on demand\n- **Fallback Logic:** If samples fail to load, falls back to PluckSynth\n- **Chord Strumming:** 50ms stagger between notes for realistic arpeggiation\n- **Progression Playback:** 600ms per chord with smooth transitions\n\n---\n\n## Code Organization:\n\n```\nsrc/\n├── components/\n│   ├── Fretboard.tsx       # Visual fretboard renderer with note highlighting\n│   ├── TabPopup.tsx        # Tab export popup for saving progressions\n│   └── Chord.tsx           # Chord display component (legacy)\n├── models/\n│   ├── Note.ts             # TypeScript interfaces for GuitarNote, ChordPosition\n│   ├── Chord.ts            # Chord data model\n│   └── Fretboard.ts        # Fretboard data model\n├── utils/\n│   ├── chordUtils.ts       # Chord formulas, intervals, and chord recognition\n│   ├── fretboardUtils.ts   # Fretboard generation + intelligent chord finding\n│   │                       # Now supports partial voicings for extended chords\n│   ├── progressionUtils.ts # Advanced progression generation (70+ templates)\n│   │                       # Modes, borrowed chords, secondary dominants,\n│   │                       # tritone subs, blues, gospel, cinematic progressions\n│   ├── voiceLeadingUtils.ts # Sophisticated voice leading optimization\n│   │                        # Handles 3-8 chord progressions with fallback strategies\n│   └── midiUtils.ts        # Tone.js audio synthesis and playback\n└── App.tsx                 # Main application logic and state management\n```\n\n### State Management Architecture\nThe app uses React's built-in state management with careful optimization:\n\n- **useState:** For UI state (selected key, chord, toggles, active notes)\n- **useEffect:** For side effects (updating notes when chord changes, auto-playing)\n- **useCallback:** For memoizing expensive computations (chord finding, audio playback)\n\nKey state variables:\n```typescript\nfretboard: GuitarNote[][]              // Static fretboard data\nactiveNotes: { note, interval }[]      // Currently highlighted notes\nvalidChords: ChordPosition[][]         // All valid fingerings for current chord\ncurrentChordIndex: number              // Which voicing is displayed\nselectedKey: string                    // Current key (C, G, D, etc.)\nisMinorKey: boolean                    // Major vs Minor mode\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fridwansharkar%2Ffretboard-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fridwansharkar%2Ffretboard-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fridwansharkar%2Ffretboard-explorer/lists"}