spotify-clone/README.md

Spotify Clone 🎵

A fully functional clone of the Spotify web player, built with React, Rust (Axum), 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.

---

🚀 Quick Start (Docker)

Option 1: Pull from Registry

docker pull git.khoavo.myds.me/vndangkhoa/spotify-clone:v3
docker run -d -p 3000:8080 --name spotify-clone \
  -v ./data:/app/data \
  -v ./cache:/tmp/spotify-clone-cache \
  --restart unless-stopped \
  git.khoavo.myds.me/vndangkhoa/spotify-clone:v3

Option 2: Build Locally

docker build -t spotify-clone:v3 .
docker run -d -p 3000:8080 --name spotify-clone \
  -v ./data:/app/data \
  -v ./cache:/tmp/spotify-clone-cache \
  --restart unless-stopped \
  spotify-clone:v3

Open http://localhost:3000.

---

🐳 Docker Deployment

Building the Image

# Build for linux/amd64 (Synology NAS)
docker build -t git.khoavo.myds.me/vndangkhoa/spotify-clone:v3 .

# Push to registry
docker push git.khoavo.myds.me/vndangkhoa/spotify-clone:v3

Docker Compose (Recommended)

services:
  spotify-clone:
    image: git.khoavo.myds.me/vndangkhoa/spotify-clone:v3
    container_name: spotify-clone
    restart: unless-stopped
    ports:
      - "3000:8080"
    environment:
      - PORT=8080
      - RUST_ENV=production
    volumes:
      - ./data:/app/data
      - ./cache:/tmp/spotify-clone-cache
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

---

📦 Synology NAS Deployment

Method A: Container Manager UI (GUI)

1. Open Container Manager on your Synology NAS.
2. Go to Registry and click Add:
   • Registry URL: https://git.khoavo.myds.me
   • Enter credentials if prompted.
3. Search for vndangkhoa/spotify-clone and download the v3 tag.
4. Go to Image, select the downloaded image, and click Run.
5. Configure:
   • Container Name: spotify-clone
   • Port Settings:
     • Local Port: 3000 (or any available port)
     • Container Port: 8080
   • Volume Settings:
     • Add folder: docker/spotify-clone/data → /app/data
     • Add folder: docker/spotify-clone/cache → /tmp/spotify-clone-cache
   • Restart Policy: unless-stopped
6. Click Done and access at http://YOUR_NAS_IP:3000.

Method B: Docker Compose (CLI)

1. SSH into your Synology NAS or use the built-in terminal.
2. Create a folder:

   mkdir -p /volume1/docker/spotify-clone
   cd /volume1/docker/spotify-clone
   

3. Create docker-compose.yml:

   services:
     spotify-clone:
       image: git.khoavo.myds.me/vndangkhoa/spotify-clone:v3
       container_name: spotify-clone
       restart: unless-stopped
       ports:
         - "3000:8080"
       environment:
         - PORT=8080
         - RUST_ENV=production
       volumes:
         - ./data:/app/data
         - ./cache:/tmp/spotify-clone-cache
   

4. Run:

   docker compose up -d
   

Synology-Specific Notes

• Architecture: This image is built for linux/amd64 (compatible with most Intel-based Synology NAS).
• DSM 7+: Use Container Manager (Docker GUI replacement).
• Data Persistence: The ./data volume stores playlists and application data. Backup this folder to preserve your data.
• Updating: Pull the latest image and recreate the container, or use Watchtower for auto-updates.

---

🛠️ Local Development

Prerequisites

• Node.js 20+
• Rust 1.75+
• Python 3.11+
• ffmpeg

1. Backend Setup (Rust)

cd backend-rust
cargo run

Backend runs on http://localhost:8080.

2. Frontend Setup

cd frontend-vite
npm install
npm run dev

Frontend runs on http://localhost:5173.

---

✨ Features

• Real-Time Lyrics: Fetch and sync lyrics from multiple sources.
• 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 dedicated full-screen player.
• Smooth Loading: Skeleton animations for seamless data fetching.

📝 License

MIT License