Fretboard Compass is a practice tool for guitar students and teachers, and it is here to show the software side of what we build. Pick a key, a mood and a starting fret, and it draws the fretboard, the chord shapes and a progression, laid out to print and drop into a binder. Tell it which chords you already know and it ranks the progressions you can play today, flagging the new chords.
It started in April 2026 as a Python web app. In July we rebuilt it as plain JavaScript that runs entirely in the browser, so it needs no server, keeps everything on the player’s own device, and costs next to nothing to host.
At a glance#
| Site | guitar.jamesfraze.com |
| What it is | Guitar theory and practice sheet generator |
| Before | A Python and Flask web app |
| After | One static page of plain JavaScript modules on Cloudflare Workers |
| Built | 2026-04-13 to 2026-07-06, moved to Cloudflare 2026-11-05 |
| Our role | Designer and developer |
What it does#
- Generate: key, scale, pattern, progression and start fret, turned into a fretboard map and chord diagrams ready to print in landscape.
- My Chords: progressions ranked by the chords you already know.
- Chord Dictionary: 12 roots by 11 chord types, 132 chords.
- Popular progressions, favorites, share links and a 30-minute-a-day practice guide.
- Sound: click any chord or shape to hear it, strummed, arpeggiated or as a lead line, in acoustic, electric, distortion or wah voices, synthesized in the browser with no audio files.
How it was built#
- A checked port. The Python version’s results were exported as test cases, and the JavaScript version had to match them exactly before it replaced it. The test suite now runs 157 tests.
- Music theory audited. Harmonic and melodic minor spellings were fixed and a separate audit checks every chord in every key.
- No third-party code. The styling framework’s CDN was replaced with a self-hosted build, and a strict Content Security Policy allows only the site’s own scripts. Nothing is tracked, and favorites stay in the browser.
- Moved to Cloudflare. Hosting moved from Netlify to Cloudflare Workers, deployed from GitHub on every push. The old host published the whole project folder, notes and all; the new deploy uploads only an allowlist of the files the app needs.
- Findable. A descriptive title and meta description, share tags, WebApplication structured data, a sitemap, robots.txt and an llms.txt file for AI answer engines.
Results#
- PageSpeed: 99 on mobile, 100 on desktop, measured 2026-11-05.
- Security headers: Content Security Policy, HSTS, nosniff, no-referrer, permissions policy and frame protection all live.
- Search Console and Cloudflare traffic figures: details coming soon.
What is next#
- Submit the sitemap to Search Console and watch how the tool gets found.
- Short lesson pages around the tool, if search demand supports them.