🎧 SvelteKit Spotify Project

A modern Spotify-style app built with SvelteKit, TypeScript, TailwindCSS, and full testing coverage using ViTest and Playwright. It uses the Spotify Web API to pull real user data including playlists, tracks, and profile information.

This project demonstrates:

• Clean architecture and separation of concerns
• Signal-based reactivity in Svelte 5
• OAuth 2.0 login with PKCE (Proof Key for Code Exchange)
• Testing best practices
• Global styling with Sass + utility-first Tailwind

🚀 Tech Stack

• SvelteKit — lightning-fast frontend framework
• Vite — next-gen build tool (used under the hood by SvelteKit)
• TypeScript — typed safety and clarity
• TailwindCSS — utility-first styling
• ViTest — component and logic testing
• Playwright — end-to-end browser testing
• ESLint + Prettier — consistent code formatting and linting

📦 Getting Started

1. Clone & Install

git clone https://github.com/armandohimself/svelte-spotify-app.git
cd svelte-spotify-app
npm install

2. Start Dev Server

npm run dev -- --open

Then open your browser to http://localhost:5173 (or it opens automatically with --open).

🧪 Testing

✅ Unit & Component Tests (ViTest)

npm run test

✅ End-to-End Tests (Playwright)

npx playwright install
npm run test:e2e

Playwright will simulate user flows like adding songs, navigating playlists, and checking responsive behavior.

🏗️ Building for Production

npm run build

Then preview your optimized app with:

npm run preview

🔧 For deployment, install the correct SvelteKit adapter based on your hosting platform (Vercel, Netlify, Node, etc.).

🛠️ Dev Tools & VS Code Extensions

For the best developer experience, install:

• Svelte for VS Code
• ESLint
• Prettier

📦 NPM Dependency Links

• Modern Normalize - Normalized browsers' default style
• Sass Stylesheet - to organize styles
• Svelte Preprocessor - to support SCSS
• Sass functions and mixins to use media queries rules.
• @fontsource/metropolis - closest font to Spotify
• @fontsource/inter - closest font to Lyft
• PCKE Generator
• Types Definitions for Node
• Types Definitions for Spotify Objecs
• Lucide Icon Library for Svelte
• Vitest - next generation testing framework
• Playwright - E2E testing
• Svelte Testing Library

🔗 Useful Links

🎧 Spotify + 🔐 Auth

• Spotify Developer Dashboard
• Spotify Web API Docs
• PKCE Explained

🧑🏽‍💻 Framework & Code

• SvelteKit Docs
• HTTP Response Status Codes

🧪 Testing

• Testing Svelte Documentation
• ViTest Docs
• Svelte Testing Library
• Playwright Docs
• Svelte Society Testing Recipes

🎨 Styling

• Avoiding the FOUC (Flash of Unstyled Content) v3.0
• Lucide Icons Search
• MDN SVG Attributes for Lucide Icons

Svelte Dev Society also curates some great tools: 🔗 Editor Support & Resources

💻 System Requirements

• Node.js: >=18.0.0
• npm: >=9.0.0

You can check your versions with:

node -v
npm -v

Userful NPM Commands

• Check Svelte/SvelteKit version: npm list svelte @sveltejs/kit