Log inSign up

test_account_001

guitar-lab

Public
Guitar music theory & scales site with a fretboard visualizer
musicreact
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

Guitar Lab 🎸

A personal music theory & scales workbench — visualize any scale on the fretboard, work through a structured curriculum, and drill your ear. Built for an intermediate guitarist whose main goal is scales and music theory.

Live: https://guitar-lab.val.run

What's inside

TabWhat it does
LessonsA 6-part curriculum (fretboard logic → intervals → major scale construction → pentatonics → modes → diatonic harmony), each with embedded live fretboard examples
Scale LabPick any root + one of 13 scales, see it color-coded across the whole neck. Toggle note names vs interval degrees (1, ♭3, 5…), and hear the scale ascend
MetronomeWeb-audio clicker, BPM 40–240, 3/4 · 4/4 · 6/4 time with accented beat one
Interval TrainerEar-training game: hear two notes, name the interval, get instant feedback and a score

Architecture

Rendering mermaid diagram...

How it works

  • theory.ts is the engine — note names, interval labels, 13 scale formulas, and a fretboard grid builder. mapScale() colors every note on the neck by its scale degree.
  • Client-side React (no build step). Twind/Tailwind utilities for styling.
  • All audio is generated with the Web Audio API (oscillators) — no audio files.
  • Every frontend module is served at versioned URLs via serveImmutableFile and cached immutably.

Ideas for next iteration

  • A chord explorer (stack thirds off any scale degree to derive chords)
  • Practice tracker (habit streaks, saved to the val's SQLite + cron daily reminder)
  • Note-to-fret finder tool
  • Microphone pitch detection for real guitar input

File structure

frontend/
  theory.ts                 Music theory + fretboard engine
  root.tsx                  HTML shell (stamps immutable asset URLs)
  index.tsx                 React entrypoint
  components/
    App.tsx                 Nav + layout
    Lessons.tsx             6-lesson curriculum
    ScaleExplorer.tsx       Interactive root/scale explorer + audio
    Fretboard.tsx           Neck renderer
    Metronome.tsx           Web-audio clicker
    IntervalTrainer.tsx     Ear-training quiz