# Spotify Clone 🎵

A fully functional clone of the Spotify web player, built with a modern stack featuring **Next.js**, **FastAPI**, and **TailwindCSS**. This application replicates the premium authentic feel of the original web player with added features like synchronized lyrics, custom playlist management, and "Audiophile" technical specs.

![Preview](https://opengraph.githubassets.com/1/vndangkhoa/spotify-clone)

---

## 🚀 Quick Start (Docker)

The easiest way to run the application is using Docker.

### Option 1: Run from Docker Hub (Pre-built)
```bash
docker run -p 3000:3000 -p 8000:8000 vndangkhoa/spotify-clone:latest
```
Open **[http://localhost:3000](http://localhost:3000)**.

### Option 2: Build Locally
```bash
docker build -t spotify-clone .
docker run -p 3000:3000 -p 8000:8000 spotify-clone
```

---

## 🛠️ Local Development

If you want to contribute or modify the code:

### Prerequisites
- Node.js 18+
- Python 3.11+
- ffmpeg (optional, for some audio features)

### 1. Backend Setup
```bash
cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
python main.py
```
Backend runs on `http://localhost:8000`.

### 2. Frontend Setup
```bash
cd frontend
npm install
npm run dev
```
Frontend runs on `http://localhost:3000`.

---

## 📦 Deployment Guide

### 1. Deploy to GitHub
Initialize the repository (if not done) and push:
```bash
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/spotify-clone.git
git push -u origin main
```

### 2. Deploy to Docker Hub
To share your image with the world (or your NAS):
```bash
# 1. Login to Docker Hub
docker login

# 2. Build the image (replace 'vndangkhoa' with your Docker Hub username)
docker build -t vndangkhoa/spotify-clone:latest .

# 3. Push the image
docker push vndangkhoa/spotify-clone:latest
```

### 3. Deploy to Synology NAS (Container Manager)
This app runs perfectly on Synology NAS using **Container Manager** (formerly Docker).

#### Method A: Using Container Manager UI (Easy)
1.  Open **Container Manager**.
2.  Go to **Registry** -> Search for `vndangkhoa/spotify-clone` (or your image).
3.  Download the image.
4.  Go to **Image** -> Select image -> **Run**.
    -   **Network**: Bridge (default).
    -   **Port Settings**: Map Local Port `3110` (or any) to Container Port `3000`.
    -   **Volume Settings** (Optional): Map a folder `/docker/spotify/data` to `/app/backend/data` to save playlists.
5.  Done! Access at `http://YOUR_NAS_IP:3110`.

#### Method B: Using Docker Compose (Recommended)
1.  Create a folder on your NAS (e.g., `/volume1/docker/spotify`).
2.  Create a file named `docker-compose.yml` inside it:
    ```yaml
    services:
      spotify-clone:
        image: vndangkhoa/spotify-clone:latest
        container_name: spotify-clone
        restart: always
        network_mode: bridge
        ports:
          - "3110:3000" # Web UI Access Port
        volumes:
          - ./data:/app/backend/data
    ```
3.  In Container Manager, go to **Project** -> **Create**.
4. Select the folder path, give it a name, and it will detect the compose file.
5. Click **Build** / **Run**.

#### ✨ Auto-Update Enabled
When using the `docker-compose.yml` above, a **Watchtower** container is included. It will automatically:
- Check for updates to `vndangkhoa/spotify-clone:latest` every hour.
- Download the new image if available.
- Restart the application with the new version.
- Remove old image versions to save space.

You don't need to do anything manually to keep it updated! 🚀

---

## ✨ Features

- **Real-Time Lyrics**: Fetch and sync lyrics from multiple sources (YouTube, LRCLIB).
- **Audiophile Engine**: "Tech Specs" view showing live bitrate, LUFS, and Dynamic Range.
- **Local-First**: Works offline (PWA) and syncs local playlists.
- **Smart Search**: Unified search across YouTube Music.
- **Responsive**: Full mobile support with a dedicated full-screen player.
- **Smooth Loading**: Skeleton animations for seamless data fetching.
- **Infinite Experience**: "Show all" pages with infinite scrolling support.
- **Enhanced Mobile**: Optimized 3-column layouts and smart player visibility.

## 📝 License
MIT License
