https://github.com/timfuhrmann/spotify-web

A Spotify Web "clone" built with Next.js covering most of its features.
https://github.com/timfuhrmann/spotify-web

nextjs react spotify

Last synced: about 1 month ago
JSON representation

A Spotify Web "clone" built with Next.js covering most of its features.

• Host: GitHub
• URL: https://github.com/timfuhrmann/spotify-web
• Owner: timfuhrmann
• License: mit
• Created: 2022-07-15T15:27:18.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-21T16:20:39.000Z (3 months ago)
• Last Synced: 2024-10-05T22:37:33.495Z (about 2 months ago)
• Topics: nextjs, react, spotify
• Language: TypeScript
• Homepage: https://demo-spotify-web.vercel.app
• Size: 1.52 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
**Last Update: 12.10.2022**

Check it out: https://demo-spotify-web.vercel.app/ - since this isn't a public application, you need a Spotify developer account to be able to access this demo.

This is not a 1:1 clone. Due to api restrictions and time reasons, some features haven’t been implemented at all, differently or not thoroughly.

![Preview](public/preview.png)

## Known issues

- **Spotify Connect**: Since there is no access to a websocket whatsoever, the application uses invalidating and refetching queries in the right moments to update the active track - this is far from perfect, which is why I force playing on this device when any other device is active.

- **Active Track**: Sometimes a track is not being highlighted even though it is playing. The web sdk occasionally plays a different version of the song that was requested which results in a mismatch of the track's uri.

- **Mobile Support**: The web sdk's mobile support isn't great yet, which is why this demo is not optimized for mobile usage.

- **Repeat track**

![Preview Playlist](public/preview-playlist.png)

## Getting Started

Run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.