Geert Rademakes aa04849442 feat: UX improvements for frontend
- 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
2025-09-19 10:19:40 +02:00
2025-09-17 10:55:35 +02:00
2025-09-17 10:55:35 +02:00
2025-09-17 10:55:35 +02:00

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)
  1. Clone and install dependencies:

    git clone <repository-url>
    cd rekordbox-reader
    npm run install:all
    
  2. 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
    
  3. Start the development servers:

    npm run dev
    

    This will start both frontend and backend servers concurrently:

Option 2: Docker Setup

  1. Build and run with Docker Compose:

    docker-compose up --build
    

    This will start all services:

📁 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 mode
  • npm run dev:frontend - Start only the frontend
  • npm run dev:backend - Start only the backend
  • npm run build - Build all packages
  • npm run install:all - Install dependencies for all packages

Frontend (packages/frontend/)

  • npm run dev - Start Vite development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run lint - Run ESLint

Backend (packages/backend/)

  • npm run dev - Start development server with hot reload
  • npm run build - Build TypeScript
  • npm 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_URL in 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 check
  • POST /api/reset - Reset database (delete all data)
  • GET /api/songs - Get all songs
  • POST /api/songs - Create/update songs
  • DELETE /api/songs - Delete songs
  • GET /api/playlists - Get all playlists
  • POST /api/playlists - Create/update playlists
  • DELETE /api/playlists - Delete playlists

🎯 Usage

  1. Upload XML File: Click "Choose XML File" to upload your Rekordbox library XML
  2. Browse Library: View your music collection in the main panel
  3. Manage Playlists: Use the playlist manager to organize your music
  4. Export: Export your modified library back to XML format

🐛 Troubleshooting

Common Issues

  1. MongoDB Connection Error:

    • Ensure MongoDB is running: brew services start mongodb-community
    • Check connection string in backend .env file
  2. Port Already in Use:

    • Frontend: Change port in packages/frontend/vite.config.ts
    • Backend: Change PORT in .env file
  3. Build Errors:

    • Clear node_modules and reinstall: rm -rf node_modules && npm run install:all

Development Tips

  • Use the browser's developer tools to inspect network requests
  • Check the backend console for API logs
  • Use the /api/health endpoint to verify backend connectivity

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature-name
  3. Make your changes
  4. Run tests and linting: npm run lint
  5. Commit your changes: git commit -m 'Add feature'
  6. Push to the branch: git push origin feature-name
  7. 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
Description
No description provided
Readme 2 MiB
Languages
TypeScript 87.5%
JavaScript 10.9%
Shell 0.5%
HTML 0.4%
CSS 0.4%
Other 0.3%