165 lines
4.4 KiB
Markdown
165 lines
4.4 KiB
Markdown
# 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
|
|
```bash
|
|
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
|
|
```bash
|
|
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](http://localhost:3000)**.
|
|
|
|
---
|
|
|
|
## 🐳 Docker Deployment
|
|
|
|
### Building the Image
|
|
```bash
|
|
# 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)
|
|
```yaml
|
|
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:
|
|
```bash
|
|
mkdir -p /volume1/docker/spotify-clone
|
|
cd /volume1/docker/spotify-clone
|
|
```
|
|
3. Create `docker-compose.yml`:
|
|
```yaml
|
|
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:
|
|
```bash
|
|
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)
|
|
```bash
|
|
cd backend-rust
|
|
cargo run
|
|
```
|
|
Backend runs on `http://localhost:8080`.
|
|
|
|
### 2. Frontend Setup
|
|
```bash
|
|
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
|