Fretboard

A client-side app for learning the guitar neck — notes, intervals, and practical exercises.

Stack

• SvelteKit — routing and app framework (CSR-only, no SSR)
• Svelte 5 — components using runes ($state, $derived, $props)
• svelte-konva + Konva.js — canvas-based guitar neck rendering
• Cloudflare Pages — deployment via @sveltejs/adapter-cloudflare
• Vitest — unit tests for pure TypeScript musical primitives
• Storybook + Chromatic — component development and visual regression testing

Getting Started

npm install
npm run dev        # dev server at http://localhost:5173
npm run build      # production build
npm run preview    # preview production build locally
npm test           # run unit tests
npm run storybook  # component development server at http://localhost:6006

Deploying

npm run deploy     # builds and deploys to Cloudflare Pages

Requires wrangler to be authenticated (wrangler login).