A focused, dark-themed practice companion for jazz musicians — built with Next.js 16, Firebase, and Tone.js.
JazzSession helps you log sessions, explore scales and standards, keep time with a drift-free metronome, and visualise your progress over time. Works across guitar, saxophone, piano, and any other instrument you play.
| Feature | Description |
|---|---|
| Session Logger | Start a built-in timer or log manually. Track instrument, topic, BPM, and notes. |
| Voice Memos | Record audio notes during a session and replay them from your session history. |
| Scale & Mode Reference | 12 essential jazz scales (Dorian, Bebop, Altered, Whole Tone, …) with keyboard diagrams. |
| Standards Library | 30+ jazz standards with chord progressions, feel, tempo range, and difficulty. Add your own custom standards. |
| Metronome | Tone.js audio engine — no drift. Tap tempo, swing feel (straight / light / heavy), any time signature. |
| Progress Charts | 30-day practice chart, daily streak counter, and breakdown by instrument and topic. |
| Auth + Sync | Google Sign-In via Firebase Auth. Data syncs across all your devices automatically. |
- Framework — Next.js 16 (App Router, Turbopack, TypeScript)
- UI — Tailwind CSS v4 + Radix UI primitives + Lucide icons
- Backend / DB — Firebase (Firestore + Auth + Storage)
- Audio engine — Tone.js (Web Audio, no scheduler drift)
- Audio recording — MediaRecorder API → Firebase Storage
- Charts — Recharts
- State — Zustand
- Testing — Vitest + Testing Library
- CI/CD — GitHub Actions + Vercel
- Node.js 20+
- A Firebase project with Firestore, Storage, and Google Auth enabled
git clone https://github.com/unrealandychan/jazz-practice-app.git
cd jazz-practice-app
npm installCreate a .env.local file at the project root:
cp .env.example .env.localFill in your Firebase project credentials:
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=All values are available in Firebase Console → Project Settings → Your apps → SDK setup and configuration.
npm install -g firebase-tools
firebase login
firebase deploy --only firestore:rules,storagenpm run devOpen http://localhost:3000.
src/
├── app/
│ ├── (public)/ # Landing page + login — no auth required
│ └── (protected)/ # All app pages — requires Google sign-in
│ ├── dashboard/
│ ├── sessions/
│ ├── scales/
│ ├── standards/
│ ├── metronome/
│ └── progress/
├── components/ # Shared UI components (Sidebar, …)
├── contexts/ # AuthContext (useAuth hook)
├── data/ # Static scales and standards data
├── lib/ # Firebase init, auth helpers, utilities
├── services/ # Firestore CRUD + Firebase Storage (sessions, userProfile, audioMemos)
├── store/ # Zustand stores (sessionTimer, metronome)
├── test/ # Vitest unit tests
└── middleware.ts # Edge middleware — cookie-based route protection
npm run dev # Start dev server (Turbopack)
npm run build # Production build
npm run start # Serve production build locally
npm run lint # ESLint
npm run format # Prettier (write)
npm run type-check # tsc --noEmit
npm run test # Vitest (single run)
npm run test:watch # Vitest (watch mode)
npm run test:coverage # Vitest with coverage| Trigger | What runs |
|---|---|
| Every push / PR | Lint → Type-check → Test → Build (ci.yml) |
Merge to main |
Firestore + Storage rules deploy (deploy-rules.yml) |
| All PRs | Vercel preview deployment (automatic) |
| Weekly | Dependabot npm + Actions updates |
Secrets required in GitHub repository settings:
FIREBASE_SERVICE_ACCOUNT— service account JSON (for rules deployment)VERCEL_TOKEN,VERCEL_ORG_ID,VERCEL_PROJECT_ID— for Vercel deployment
Contributions are welcome! Please read the guidelines below before opening a PR.
- Fork the repo and create a feature branch:
git checkout -b feat/my-feature - Follow the Conventional Commits spec — enforced by commitlint.
- Make sure
npm run type-checkandnpm run testboth pass. - Open a pull request against
main. A Vercel preview URL is generated automatically.