A SvelteKit app that pulls your active worship songs from Planning Center Online and matches them on Spotify so you can generate a playlist with one click.

How It Works#

Server-side: SvelteKit server routes fetch your song list from the PCO Services API (keeping your API credentials safe on the server).
Client-side: After authenticating with Spotify via OAuth, the app searches for each song on Spotify and lets you curate the list.
One click: Hit "Make the playlist!" to create a Spotify playlist from the matched tracks.

Songs are filtered to those in "active" rotation — scheduled in the last 6 months, used more than once, and excluding Christmas songs.

Prerequisites#

Node.js 24+
A Planning Center Developer Personal Access Token (Application ID + Secret)
A Spotify Developer Application (Client ID)

Setup#

Clone and install
```
pnpm install
```
Configure environment variables

Copy the example env file and fill in your credentials:
```
cp .env.example .env
```
Edit .env:
```
PCO_APP_ID=your_planning_center_app_id
PCO_APP_SECRET=your_planning_center_app_secret
VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id
```
Note: PCO_APP_ID and PCO_APP_SECRET are server-only and never exposed to the browser. VITE_SPOTIFY_CLIENT_ID is prefixed with VITE_ because it needs to be available in the browser for the Spotify OAuth redirect.
Configure your Spotify app

In the Spotify Developer Dashboard, add the following Redirect URI to your app:
```
http://127.0.0.1:5173/callback
```
For production, also add your deployed URL (e.g. https://your-site.netlify.app/callback).

Development#

pnpm run dev

Open http://127.0.0.1:5173.

Build#

pnpm run build
pnpm run preview

Deploy to Netlify#

This project uses @sveltejs/adapter-netlify and includes a netlify.toml configuration.

Push your repo to GitHub/GitLab.
Connect it to Netlify.
Set the following environment variables in Netlify's site settings:
- PCO_APP_ID
- PCO_APP_SECRET
- VITE_SPOTIFY_CLIENT_ID
Netlify will auto-detect the build command (pnpm run build) and publish directory (build) from netlify.toml.

Tech Stack#

SvelteKit (Svelte 5)
Tailwind CSS v4
Spotify Web API
Planning Center API
Netlify (serverless deployment)

Project Structure#

src/
├── app.html                         # HTML shell
├── app.css                          # Tailwind
├── routes/
│   ├── +layout.svelte               # Root layout
│   ├── +error.svelte                # Error page with app-data reset
│   ├── +page.svelte                 # Landing page — plan input & nav to /all
│   ├── all/
│   │   ├── +page.server.ts          # Server load — fetches all active PCO songs
│   │   └── +page.svelte             # All active songs view with TrackList
│   ├── plans/
│   │   └── [planId]/
│   │       ├── +page.server.ts      # Server load — fetches a single plan's songs
│   │       └── +page.svelte         # Single plan view with prev/next navigation
│   └── callback/
│       └── +page.svelte             # Spotify OAuth callback handler
├── lib/
│   ├── components/
│   │   ├── Track.svelte             # Spotify track display card
│   │   ├── TrackList.svelte         # Spotify search, selection & playlist creation
│   │   ├── PcoDescription.svelte    # PCO song metadata display
│   │   └── Spinner.svelte           # Loading spinner indicator
│   ├── pco/
│   │   ├── fetch.ts                 # PCO API client with retry & in-memory TTL cache
│   │   └── songs.ts                 # Fetches, dedupes & enriches active songs from PCO
│   ├── artist-mapping.ts            # PCO author → Spotify artist mapping
│   ├── batch-async.ts               # Concurrency-limited async batch processor
│   ├── dates.ts                     # Rolling date-window constants
│   ├── pkce.ts                      # PKCE code verifier/challenge for Spotify OAuth
│   └── spotify-api.ts               # Spotify Web API client (search, playlist, etc.)

Configure Feed