125 lines
3.6 KiB
Markdown
125 lines
3.6 KiB
Markdown
# 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.
|
|
|
|
|
|
|
|
---
|
|
|
|
## 🚀 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**.
|
|
|
|
---
|
|
|
|
## ✨ 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.
|
|
|
|
## 📝 License
|
|
MIT License
|