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
• 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)

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:

   • Frontend: http://localhost:5173
   • Backend: http://localhost:3000

Option 2: Docker Setup

1. Build and run with Docker Compose:

   docker-compose up --build
   

   This 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 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

📊 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