https://github.com/rohitpotato/spotify-redone-react
Yet another Spotify Client but this time built with react-query, zustand and tailwind css :)
https://github.com/rohitpotato/spotify-redone-react
dark-mode persistence react react-patterns react-query spotify state-management tailwindcss zustand
Last synced: 3 months ago
JSON representation
Yet another Spotify Client but this time built with react-query, zustand and tailwind css :)
- Host: GitHub
- URL: https://github.com/rohitpotato/spotify-redone-react
- Owner: rohitpotato
- Created: 2021-02-07T23:15:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-07T14:38:39.000Z (over 4 years ago)
- Last Synced: 2025-02-14T03:15:43.171Z (4 months ago)
- Topics: dark-mode, persistence, react, react-patterns, react-query, spotify, state-management, tailwindcss, zustand
- Language: JavaScript
- Homepage: https://rohitpotato.github.io/spotify-redone-react
- Size: 2.05 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spotify Redone 🎵🎉
## A spotify client built with [react-query](https://github.com/tannerlinsley/react-query), [zustand](https://github.com/pmndrs/zustand) and [tailwindcss](https://github.com/tailwindlabs/tailwindcss) 🔥 <3
## [View Demo here](https://rohitpotato.github.io/spotify-redone-react)
### Features Include
1. Playback Queue
2. Dark Mode
3. Search for your favorite tracks, artists, albums and playlists
4. Browse through categories, playlists, artists and albums.
5. Follow/Unfollow Playlists and Artists
6. Localstorage persistence saves your volume and theme
7. Infinite Scrolling
8. And a few more..
### Steps to install
1. Get your _CLIENT_ID_ from [spotify developer console](https://developer.spotify.com/dashboard/login).
2. Paste the _CLIENT_ID_ inside `src/constants/index.js`
Example:
```
const apiCredentials = {
CLIENT_ID: "YOUR_CLIENT_ID",
REDIRECT_URL: "http://localhost:3000/callback",
SCOPES: [
"user-library-read",
"streaming",
"user-top-read",
"user-read-private",
"user-read-recently-played",
"playlist-read-private",
"playlist-modify-public",
"playlist-modify-private",
]}
```
3. Run `npm install` to install all dependencies
4. Run `npm start` to start the dev server.