- Clear selected song when changing playlists (already implemented) - Replace 'Add to playlist...' and 'Remove from playlist' buttons with 'Actions' dropdown in PaginatedSongList - Add key (tonality) next to duration in song list display format (e.g., 1:16 - A8) - Update song matching page title to include storage provider (e.g., 'Sync and Matching (WEBDAV)') - Remove storage provider text from sync buttons for cleaner interface - Fix bulk selection state clearing when switching playlists to prevent stale selections
Rekordbox Reader
A web application for reading, managing, and exporting Rekordbox XML files. This project allows DJs to upload their Rekordbox library XML files, view and organize their music collection, manage playlists, and export modified libraries back to XML format.
🎵 Features
- XML File Upload: Upload and parse Rekordbox XML library files
- Music Library Management: Browse and search through your music collection
- Playlist Management: Create, edit, and organize playlists and folders
- Song Details: View detailed information about tracks including BPM, key, rating, etc.
- Export Functionality: Export modified libraries back to XML format
- Music File Storage: Upload and stream music files with multiple storage providers
- Storage Providers: Support for S3-compatible storage (AWS S3, MinIO) and WebDAV (Nextcloud, ownCloud)
- Responsive Design: Works on desktop and mobile devices
- Database Storage: Persistent storage using MongoDB
🏗️ Architecture
This is a monorepo with the following structure:
- Frontend: React + TypeScript + Vite application with Chakra UI
- Backend: Node.js + Express + TypeScript API server
- Database: MongoDB for data persistence
- Docker: Containerized deployment option
🚀 Quick Start
Prerequisites
- Node.js (v18 or higher)
- npm or yarn
- MongoDB (for local development)
Option 1: Development Setup (Recommended)
-
Clone and install dependencies:
git clone <repository-url> cd rekordbox-reader npm run install:all -
Start MongoDB (if not already running):
# On macOS with Homebrew brew services start mongodb-community # Or using Docker docker run -d -p 27017:27017 --name mongodb mongo:latest -
Start the development servers:
npm run devThis will start both frontend and backend servers concurrently:
- Frontend: http://localhost:5173
- Backend: http://localhost:3000
Option 2: Docker Setup
-
Build and run with Docker Compose:
docker-compose up --buildThis will start all services:
- Frontend: http://localhost:8080
- Backend: http://localhost:3001
- MongoDB: localhost:27017
📁 Project Structure
rekordbox-reader/
├── packages/
│ ├── frontend/ # React frontend application
│ │ ├── src/
│ │ │ ├── components/ # React components
│ │ │ ├── hooks/ # Custom React hooks
│ │ │ ├── pages/ # Page components
│ │ │ ├── services/ # API and XML services
│ │ │ ├── types/ # TypeScript interfaces
│ │ │ └── utils/ # Utility functions
│ │ └── Dockerfile
│ └── backend/ # Express API server
│ ├── src/
│ │ ├── models/ # MongoDB models
│ │ ├── routes/ # API routes
│ │ └── index.ts # Server entry point
│ └── Dockerfile
├── docker-compose.yml # Docker orchestration
└── package.json # Monorepo configuration
🛠️ Available Scripts
Root Level (Monorepo)
npm run dev- Start both frontend and backend in development modenpm run dev:frontend- Start only the frontendnpm run dev:backend- Start only the backendnpm run build- Build all packagesnpm run install:all- Install dependencies for all packages
Frontend (packages/frontend/)
npm run dev- Start Vite development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
Backend (packages/backend/)
npm run dev- Start development server with hot reloadnpm run build- Build TypeScriptnpm run start- Start production server
🔧 Configuration
Environment Variables
Create a .env file in the backend directory:
MONGODB_URI=mongodb://localhost:27017/rekordbox
PORT=3000
NODE_ENV=development
API Configuration
The frontend is configured to connect to the backend API. The API URL can be configured in:
- Development:
packages/frontend/src/services/api.ts - Production: Environment variable
VITE_API_URLin Docker
Storage Configuration
The application supports multiple storage providers for music files:
S3-Compatible Storage (AWS S3, MinIO)
STORAGE_PROVIDER=s3
S3_ENDPOINT=http://localhost:9000
S3_ACCESS_KEY_ID=minioadmin
S3_SECRET_ACCESS_KEY=minioadmin
S3_BUCKET_NAME=music-files
S3_REGION=us-east-1
S3_USE_SSL=false
WebDAV (Nextcloud, ownCloud)
STORAGE_PROVIDER=webdav
WEBDAV_URL=https://your-nextcloud.com/remote.php/dav/files/username/
WEBDAV_USERNAME=your-username
WEBDAV_PASSWORD=your-password-or-app-password
WEBDAV_BASE_PATH=/music-files
You can also configure storage through the web interface at Configuration → Storage Configuration.
For detailed setup instructions, see WEBDAV_INTEGRATION.md.
📊 API Endpoints
GET /api/health- Health checkPOST /api/reset- Reset database (delete all data)GET /api/songs- Get all songsPOST /api/songs- Create/update songsDELETE /api/songs- Delete songsGET /api/playlists- Get all playlistsPOST /api/playlists- Create/update playlistsDELETE /api/playlists- Delete playlists
🎯 Usage
- Upload XML File: Click "Choose XML File" to upload your Rekordbox library XML
- Browse Library: View your music collection in the main panel
- Manage Playlists: Use the playlist manager to organize your music
- Export: Export your modified library back to XML format
🐛 Troubleshooting
Common Issues
-
MongoDB Connection Error:
- Ensure MongoDB is running:
brew services start mongodb-community - Check connection string in backend
.envfile
- Ensure MongoDB is running:
-
Port Already in Use:
- Frontend: Change port in
packages/frontend/vite.config.ts - Backend: Change
PORTin.envfile
- Frontend: Change port in
-
Build Errors:
- Clear node_modules and reinstall:
rm -rf node_modules && npm run install:all
- Clear node_modules and reinstall:
Development Tips
- Use the browser's developer tools to inspect network requests
- Check the backend console for API logs
- Use the
/api/healthendpoint to verify backend connectivity
🤝 Contributing
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Make your changes
- Run tests and linting:
npm run lint - Commit your changes:
git commit -m 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
📝 License
This project is licensed under the MIT License.
🙏 Acknowledgments
- Built with React, TypeScript, and Vite
- UI components from Chakra UI
- XML parsing with xml2js and sax
- Backend powered by Express and MongoDB