A mobile-first Progressive Web App (PWA) for practicing musical sight-reading. Master notes on the treble and bass clefs with a clean, distraction-free serif interface.
- Treble & Bass Clefs: Practice on either clef or both simultaneously.
- Scoring System: Track your progress with a Scoreboard that keeps a tally of your session.
- Timed Practice: Optional session timer with a smooth, high-visibility progress bar.
- Persistent Settings: Your preferences (clef, difficulty, time limit) are saved automatically between sessions.
- Dropdown Settings: A space-efficient setup menu that stays out of the way during practice.
- Customizable Difficulty: Adjust the number of ledger lines (0 to 6) to challenge your reading.
- Ledger Line Focus: Toggle "Only Ledger Lines" mode to specifically target notes outside the standard staff.
- Practice History: Tracks total practice time and weekly progress using localStorage.
- Professional Notation: Powered by VexFlow 5 for accurate musical rendering.
- Mobile First: Designed for touch interaction—tap to reveal, then select if you were right or wrong. Optimized for screens as small as 352x339px (Samsung Z-Flip 6 front cover).
- PWA Support: Install it on your home screen and use it offline.
- Light Theme: A classic black-on-white serif aesthetic for maximum legibility.
The app follows standard engraving rules for better learning:
- Stem Direction:
- Notes below the middle line have stems pointing up (right side).
- Notes on or above the middle line have stems pointing down (left side).
- Clef Ranges: Support for up to 6 ledger lines above and below the staff for comprehensive practice.
- Node.js (v20 or later recommended)
- npm
-
Clone the repository:
git clone https://github.com/macdonaldr93/ledger-app.git cd ledger-app -
Install dependencies:
npm install
-
Start the development server:
npm run dev
- Build:
npm run build - Lint:
npm run lint - Test:
npm run test
- Framework: React 19 + TypeScript
- Bundler: Vite
- Notation: VexFlow 5
- Testing: Vitest
- PWA: vite-plugin-pwa
- Deployment: GitHub Actions + GitHub Pages
MIT