Piano Studio Manager hero image
Back to Projects
Web AppLive

Piano Studio Manager

2026-07-17
Next.js 16 · React 19 · TypeScript · Neon Postgres · Prisma 7 · NextAuth · Tailwind CSS 4 · Vercel

A full studio-in-a-box for a private piano teaching practice — students, timetabling, billing, invoicing, and reporting in one web app. It currently runs a real studio with around 100 active students and generates 70+ invoices per term.

Problem Solved

Running a private music studio means juggling enrolments, a weekly lesson timetable that changes every term, tuition and book charges per family, invoicing, chasing outstanding balances, and knowing how the term is tracking financially — a workflow that usually lives across spreadsheets, email threads, and memory.

Piano Studio Manager replaces that with one system managing the complete term lifecycle: enrol students, build the term's weekly timetable, assign tuition and book charges, generate invoices for every family in one click, and email statements of account to anyone with an outstanding balance. A reporting dashboard keeps revenue, invoice status, and outstanding balances visible at a glance.

Key Features

Student Management

Enrol, edit, deactivate, and bulk-import students via CSV, with grade, level (Beginner / Intermediate / Advanced), notes, and parent contact details on every record.

Term-Based Timetable

Define terms (e.g. "Term 2 2026", 10 weeks), lay out week 1 by day and time slot, then auto-generate a rotating schedule for the remaining weeks. Copy an entire term forward at the start of a new term.

Timetable Exports

One-click export of the timetable to CSV, PDF, and Word, plus a parent email-list CSV for mail merges.

Billing Setup

Define reusable line items — group tuition, private tuition, books — and assign them to students individually or in bulk per term.

Invoice Generation

Generate invoices for the whole term in one action, with per-family PDF downloads, credit notes, CSV export, and a status state machine (Draft → Sent → Paid / Overdue) enforced server-side.

Statements of Account

Per-family statements combining invoices, credit notes, and payments, with "send to all with balance" email dispatch and outstanding-balance filtering.

Reports & Analytics

Revenue overview (invoiced / paid / outstanding), invoice status breakdown, top students, and a date-ranged sales report with CSV export.

Authentication & Security

Credential login via NextAuth with bcrypt-hashed passwords, role-based access, and middleware-protected routes.

Architecture

Architecture Overview

A Next.js 16 App Router application (Turbopack) with a (dashboard) route group sharing an authenticated shell across all studio pages. Data lives in Neon serverless PostgreSQL via Prisma 7, and every mutation endpoint validates its input with Zod before it touches the database, returning through a shared response helper library for a consistent API contract.

Document generation — invoice and timetable PDFs, Word exports, CSV import/export — happens client-side, keeping the serverless functions lean.

  • Frontend: Next.js 16 App Router (Turbopack), React 19, TypeScript, Tailwind CSS v4
  • Data: Neon serverless PostgreSQL via Prisma 7
  • Auth: NextAuth credentials provider, bcrypt password hashing, middleware-protected routes
  • Validation: Zod schemas on every mutation endpoint, shared API response helpers
  • Documents & email: jsPDF (invoices/timetables), docx (Word export), Nodemailer (statements), PapaParse (CSV)
  • Quality: Vitest unit/integration tests, Playwright end-to-end tests
  • Hosting: Vercel

Key Decisions

1

Server-side state machine for invoice status

Invoice transitions (Draft → Sent → Paid / Overdue) are enforced on the server, so an invoice can never skip or reverse illegal states regardless of what the client sends — the financial record stays trustworthy even as the UI evolves.

2

Client-side document generation

PDF, Word, and CSV generation run in the browser with jsPDF, docx, and PapaParse rather than on the server — keeping the serverless functions lean and avoiding cold-start-heavy document rendering on Vercel.

3

Validate every mutation with Zod behind a shared response contract

Every API route returns through a shared response helper library and every mutation is Zod-validated before it touches the database, so client and server agree on shapes and bad input fails fast with a consistent error surface.

Screenshots

Piano Studio Manager sign-in screen
Sign-in screen
Dashboard showing studio-wide stats: total students, active sessions, invoices, and revenue
Dashboard with studio-wide stats
Student roster with CSV import and quick actions
Student roster with CSV import and quick actions
Term timetable with day and week navigation, time slots, and rotation generation
Term timetable with day/week navigation and rotation generation
Billing line items and per-term assignment to students
Billing line items and per-term assignment
Generated invoices for the term with status tracking
Generated invoices for the term with status tracking
Family statements with outstanding balances and bulk email dispatch
Family statements with outstanding balances and bulk email
Reports and analytics view with revenue overview, invoice status breakdown, and sales report
Reports & analytics — revenue, invoice status, sales report

Interested in something similar?

We scope, design, and ship data and AI tools that solve the problems your team actually has.

Let's Talk