SvelteKit Spotify OBS Overlay

This project is a SvelteKit-based web application designed to create customizable Spotify overlays for OBS. Users can connect their Spotify account, choose from various themes, and generate a unique URL to use as a Browser Source in OBS.

Features

• Spotify Integration: Connect your Spotify account via OAuth2 to display currently playing tracks.
• Customizable Themes: Multiple visual themes for the overlay.
• OBS Integration: Generates a unique, persistent UUID-based URL for easy integration into OBS as a Browser Source.
• Multi-language Support: Localization support for English and German.
• Secure: Sensitive Spotify credentials (Client ID, Client Secret, Tokens) are encrypted before being stored in the database.

Technical Stack

• Framework: SvelteKit
• Database: PostgreSQL
• ORM: Prisma
• Styling: Tailwind CSS
• Authentication: Custom session-based authentication with cookie-based persistence.

Getting Started

Environment Setup:

• Create a PostgreSQL database with prisma.
• Create a .env file

NODE_ENV="production"

DATABASE_URL="PRISMA_DATABASE_URL"
ENCRYPTION_KEY="SOME_RANDOM_STRING"

# Allow registration for new users (true/false)
# I added this so I don't have to deal with 2FA or spam registartions.... 
ALLOW_REGISTRATION="true" 

Database Migration:

npx prisma migrate dev

Development:

npm run dev

Usage:

• Register/Login to the dashboard.
• Enter your Spotify Client ID and Secret (from the Spotify Developer Dashboard).
• Authorize the application.
• Copy the generated OBS Source URL and add it to OBS.

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Deploying via Docker & Kubernetes

I will not include instructions here for the Kubernetes setup, because my setup is way too jank, my first time using Kubernetes and I don't really know what I was doing. Essentially, configure the Kubernetes cluster with your Docker Image, do some traefik stuff for certification / tls, and you're good to go. The clankers can probably help with this part.

# 1. Build the image locally
# 'yourusername' is your Docker Hub username
# 'sveltify' is the name of your app
docker build -t yourusername/sveltify:latest .

# 2. Push it to the cloud (Docker Hub)
docker push yourusername/sveltify:latest

Cheatsheet for Kubernetes:

# View all resources in your app namespace
kubectl get all -n sveltify

# Tail app logs
kubectl logs -n sveltify -l app=sveltify -f

# Restart the app (e.g. to pull a new :latest image)
kubectl rollout restart deployment/sveltify -n sveltify

# Check Traefik logs
kubectl logs -n traefik -l app.kubernetes.io/name=traefik -f

# Check cert-manager logs
kubectl logs -n cert-manager -l app=cert-manager -f

# Force cert renewal (if needed)
kubectl delete certificate sveltify-tls -n sveltify
# cert-manager will re-create it automatically within seconds