# 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:**
   ```bash
   git clone <repository-url>
   cd rekordbox-reader
   npm run install:all
   ```

2. **Start MongoDB** (if not already running):
   ```bash
   # 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:**
   ```bash
   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:**
   ```bash
   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:

```env
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