Practice App

A comprehensive music practice management application built with Next.js and Supabase. This app helps music teachers manage classes, assignments, and track student practice sessions.

Features

📚 Book Management

• Upload and manage music books with PDF support
• Track practice sessions for individual pieces
• Weekly practice statistics and analytics
• Piece-specific practice tracking

🎓 Class Management

• Create and manage music classes
• Student enrollment and roster management
• Class-specific assignments and tracking

📝 Assignment System

• Create assignments for individual students or entire classes
• Track assignment completion and progress
• SMS notifications for assignment updates

📊 Practice Tracking

• Log practice sessions with duration tracking
• Weekly practice statistics
• Progress visualization and analytics

📱 Student Access

• Secure token-based student access
• Mobile-friendly interface for practice logging

Tech Stack

• Framework: Next.js 16.0.6 with App Router
• Database: Supabase
• Frontend: React 19.2.0
• Styling: CSS Modules
• Authentication: Supabase Auth
• File Storage: Supabase Storage (for PDFs)
• SMS: Custom SMS integration

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun
• Supabase account and project

Installation

1. Clone the repository:

git clone <repository-url>
cd practice-app

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Set up environment variables: Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

4. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

5. Open http://localhost:3000 to view the application.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes
│   │   ├── assignments/   # Assignment management
│   │   ├── books/         # Book and practice tracking
│   │   ├── classes/       # Class management
│   │   ├── enrollments/   # Student enrollments
│   │   ├── pieces/        # Music piece management
│   │   └── sessions/      # Practice sessions
│   ├── books/             # Book management pages
│   ├── classes/           # Class management pages
│   └── s/                 # Student access pages
├── components/            # Reusable React components
│   ├── assignments/       # Assignment-related components
│   ├── books/            # Book management components
│   ├── classes/          # Class management components
│   └── common/           # Shared components
└── lib/                  # Utility functions and configurations
    ├── assignmentsDb.js  # Assignment database operations
    ├── sms.js           # SMS functionality
    └── supabaseClient.js # Supabase configuration

API Endpoints

Books

• GET/POST /api/books - List/create books
• GET/PUT/DELETE /api/books/[id] - Book operations
• GET /api/books/[id]/stats/weekly - Weekly practice stats

Classes

• GET/POST /api/classes - List/create classes
• GET/PUT/DELETE /api/classes/[id] - Class operations
• GET /api/classes/[id]/roster - Class roster

Assignments

• GET/POST /api/assignments - List/create assignments
• GET/PUT/DELETE /api/assignments/[id] - Assignment operations

Practice Sessions

• GET/POST/DELETE /api/sessions/[sessionId] - Session management

Database Schema

The app uses Supabase with the following main tables:

• books - Music books and materials
• classes - Music classes
• students - Student information
• enrollments - Class enrollments
• assignments - Practice assignments
• practice_sessions - Individual practice logs
• pieces - Music pieces within books

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Code Style

• ESLint configuration with Next.js rules
• React Compiler enabled for optimization
• CSS Modules for component styling

Deployment

The app can be deployed on Vercel, Netlify, or any platform supporting Next.js:

1. Build the application:

npm run build

2. Set up environment variables on your hosting platform

3. Deploy using your preferred method

Vercel Deployment

The easiest way to deploy is using the Vercel Platform:

1. Connect your GitHub repository
2. Configure environment variables
3. Deploy automatically on every push

Future Goals

🤖 AI-Powered Practice Assessment

• Audio Analysis: AI agent that listens to student practice sessions in real-time
• Performance Assessment: Automated evaluation of pitch accuracy, rhythm, tempo, and technique
• Personalized Exercises: Generate custom 4-8 measure exercises targeting specific areas of improvement
• Adaptive Learning: Exercises that adjust difficulty based on student progress and skill level
• Real-time Feedback: Instant coaching suggestions during practice sessions

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is private and proprietary.