How this demo works
This is a fully working front-end build. The practice tools are 100% real — the accounts and paywall are a browser-only simulation so you can click through the whole experience without a server.
Real & functional: the metronome, tempo trainer, practice timer,
session logging, streaks, goals, and dashboard. Your data is saved in this browser.
Simulated: sign-up / login (no password is checked) and the “Go Pro”
paywall (no payment is taken — it just flips a flag in your browser). Anyone could edit
browser storage to unlock lessons, so this is not secure on its own.
Going to production
To turn this into a real paid product, three pieces move to a backend:
- Accounts & sessions — replace the demo functions in js/app.js (signup / login / logout) with calls to an auth provider (e.g. Auth0, Clerk, Supabase, or your own server with hashed passwords + secure cookies).
- Payments — replace the click handler in js/pricing.js with a redirect to Stripe Checkout. Only mark a user “Pro” after Stripe confirms the subscription via webhook.
- Protected video — host lessons on a provider that supports signed, expiring URLs (Mux, Cloudflare Stream, Vimeo Pro, or HLS behind your auth). The gate in js/lessons.js then asks your server for a playback token instead of trusting a local flag. Free previews can stay public.
Everything else — the design, the practice-first UX, the metronome engine, and the tracking logic — carries straight over.
Run it locally
It's a static site, so any web server works. From this folder:
python3 -m http.server 8000
Then open http://localhost:8000.