An unofficial, front-end-only study of Spotify's web interface, built with React and TypeScript. It demonstrates responsive layouts, navigation, menus, dialogs, animations and multiple UI languages using fictional sample content.
Independent project. Not created, endorsed, sponsored by, or affiliated with Spotify AB. This is not a Spotify client. No Spotify API, genuine account authentication, music streaming, or payments are provided.
- Web-player-style navigation: Home, Search, Browse, Library and media details.
- Mock artist, album, track, playlist and profile pages.
- Now Playing and queue previews, player controls, lyrics and device-selection dialogs.
- Podcast/show/episode, audiobook and friend-activity preview pages.
- Login/signup mock screens and selected marketing page layouts.
- Japanese, English, Korean and Simplified Chinese UI translations.
- Keyboard-accessible menus and dialogs, responsive layout, reduced-motion support, and Playwright tests.
The interface is a visual recreation, not a production streaming service. Controls can demonstrate local UI state; actions requiring an account, media, social network or backend are intentionally non-functional. Playlist and player state are temporary. Language selection is stored in the browser.
- Node.js 24 or newer (recommended)
- npm
npm ci
npm run devOpen the URL shown by Vite (typically http://localhost:5173).
npm run typecheck
npm test
npm run build
npx playwright install chromium
npm run test:e2eThe automated browser suite uses Chromium. The development server is managed automatically by Playwright when necessary.
React, TypeScript, Vite, TanStack Router, Zustand, React Aria Components, Tailwind CSS, Phosphor Icons, Vitest and Playwright.
| Path | Purpose |
|---|---|
src/features/app/ |
Player-like pages, navigation, components and dialogs |
src/features/lp/ |
Mock marketing and authentication screens |
src/data/ |
Entirely fictional media and profile data |
src/i18n.tsx |
Shared interface translations |
src/styles/ |
Design, layout and motion styles |
tests/e2e/ |
Browser-based UI tests |
This repository intentionally excludes local research logs, internal planning files, captured third-party website images, DOM snapshots and machine-specific data.
Spotify is a trademark of Spotify AB. All third-party names, logos and trademarks remain the property of their respective owners. Mentioning Spotify here identifies the interface studied; it does not imply official status or permission to use Spotify branding in other projects. Please review the Spotify Design & Branding Guidelines before publishing a hosted demo or reusing any brand elements.
Sample artists, songs, podcasts, books and cover gradients are fictional. No real music, Spotify account credentials, third-party screenshots or scraped metadata are distributed.
The original source code in this repository is made available under the MIT License. That license does not grant rights in any third-party trademarks, brands, designs or content.
See CONTRIBUTING.md for development conventions.