Music Theory Explorer

An interactive web application for learning and exploring music theory concepts including scales, chords, intervals, and rhythm.

Features

• Interactive Piano - Visual piano keyboard for note selection
• Scales & Chords - Explore major/minor scales and various chord types (Major, Minor, Diminished, Augmented, 7th chords)
• Intervals - Learn musical intervals and their semitone distances
• Rhythm Chart - Visualize rhythm patterns and timing
• Bilingual Support - English and Chinese interface (中文 & English)
• AI Integration - Gemini API support for educational assistance

Tech Stack

• Framework: Next.js 14 with React 18
• Language: TypeScript
• Styling: Tailwind CSS
• Visualization: Chart.js
• Icons: Lucide React

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Open http://localhost:3000 in your browser.

Project Structure

• app/ - Next.js app directory with main page and layout
• components/ - React components (Piano, ScaleChart, RhythmChart, Sidebar)
• lib/music.ts - Music theory utilities (notes, chords, scales, intervals)

Environment

Set NEXT_PUBLIC_GEMINI_KEY environment variable for AI features.