🌙 TwoMoons

English | 中文

Powerful and Interactive Music Learning Platform.

📖 Introduction

Two Moons is a web-based interactive music learning application designed to help users learn and practice music theory more easily. The project supports web access and can be packaged as a mobile application using Capacitor.

✨ Features

• Global Piano: A virtual piano keyboard available anytime, making it easy to capture inspiration on the go.
• Chord Editor: A powerful chord editing and auditioning tool with guitar and piano views, helping users explore and build complex chord progressions.
• Moa Roll: A visual MIDI piano roll editor that provides an intuitive melody creation and editing experience.
• Staff Notation: Staff notation rendering and highlighting based on ABCJS, supporting score learning and sight-reading practice.
• Practice Tools: Built-in music theory training modules, including interval recognition, chord progression analysis, rhythm practice, etc.
• AI Mooner: Integrated AI assistance to provide intelligent support for music creation.
• Community Sharing: A complete user system supporting registration, login, and sharing/exchanging music works.

🛠️ Tech Stack

• Framework: Next.js, React
• Language: TypeScript
• UI Components: Ant Design, Tailwind CSS
• State Management: MobX, Valtio
• Music Engine: Tone.js, abcjs, @spotify/basic-pitch
• Mobile Cross-Platform: Capacitor (Android/iOS)
• Backend Services: Supabase (Database), AliOSS (Storage)
• Log Service: Node.js (Log Service)

⚙️ Environment Configuration (Env)

Before running the project, please ensure the environment variables are configured. You can copy the .env.example file to .env.local and fill in the corresponding values.

cp .env.example .env.local

Key environment variables to configure include:

• SUPABASE_URL: Supabase Project URL (Server-side only)
• SUPABASE_ANON_KEY: Supabase Anonymous Key (Server-side only)
• ACCESSKEY_ID: Aliyun OSS Access Key ID (Server-side only)
• ACCESSKEY_SECRET: Aliyun OSS Access Key Secret (Server-side only)
• AI_API_KEY: ZHIPU GLM AI Service API Key (Server-side only)
• AUTH_SECRET: ZHIPU Authentication Secret (Server-side only)

Note: Variables marked as Server-side only should not be exposed in client-side code.

🚀 Quick Start

1. Install Dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

2. Start Development Server:

   npm run dev

   Open your browser and visit http://localhost:3000 to see the application.

📱 Mobile Build

This project uses Capacitor for mobile development.

1. Build Next.js Application:

   npm run build
   npm run export # If static export is needed

2. Sync Configuration to Native Project:

   npx cap sync

3. Open Android/iOS Project:

   npx cap open android
   # or
   npx cap open ios

Other Commands

Push to pre environment: git push pre

👥 Contributors

🤝 Contribution Guide

Contributions are welcome! To maintain project quality and direction, please follow this process:

• Bug Fixes: Feel free to submit a Pull Request (PR) directly to fix bugs.
• New Features: Please submit a Feature Request Issue first, describing the feature you want to add. Once we confirm the feature can be added, you can start implementing it and submit a PR.

If you want to contribute but don't know where to start, you can contact me via email.

📄 License

This project is licensed under the GPL-3.0 License.

---

Let Love Echo.