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)

docker run -p 3000:3000 -p 8000:8000 vndangkhoa/spotify-clone:latest

Open http://localhost:3000.

Option 2: Build Locally

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

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

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:

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):

# 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:

   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