francoborrelli/spotify-react-web-client
A complete Spotify clone built with Typescript, React, React Redux, Spotify Web API, and Spotify Playback SDK. This web client replicates the core functionalities of Spotify, including music playback, search, playlists, and user authentication, delivering a seamless user experience.
🎧 Spotify React Web Client
Important
Spotify Playback requires users to authenticate with a valid Spotify Premium subscription.
🚀 Features
⚡ Music Playback: Play songs in real-time using the Spotify Playback SDK.
⚡ Playback Controls: Play, pause, next, previous, shuffle, and repeat functionalities.
⚡ Music Browsing: Search and explore songs, artists, albums, and playlists.
⚡ Playlists Management: Create, edit, and delete personalized playlists.
⚡ Saved Playlists and Albums Access: View and play your saved playlists and albums.
⚡ Liked Songs: Mark tracks as "liked" and access a dedicated playlist for liked songs.
⚡ Playback Devices: Switch between different playback devices (desktop, mobile, smart speakers).
⚡ Follow/Unfollow Artists: Follow and unfollow artists to get updates on their new releases.
⚡ Artist and Album Pages: Dedicated pages for artists and albums, showcasing top songs, discography, and related artists.
🛠 Technologies Used
🎵 React: For building the user interface with reusable components.
🎵 React Redux: For global state management and smooth data flow across the app.
🎵 Spotify Web API: To fetch data like playlists, albums, and user information.
🎵 Spotify Playback SDK: For real-time music playback control within the web client.
📸 Screenshots
More in images folder.
|
|
|
⚙️ Installation & Setup
To run this project locally, follow these steps:
-
Clone this repository:
clone https://github.com/francoborrelli/spotify-react-web-client.git
-
Navigate to the project directory:
cd spotify-react-web-client -
Install dependencies:
yarn install
-
Set up your Spotify Developer account and create a new app to obtain your Client ID and Redirect URI. Add these to an
.envfile in the root of your project:REACT_APP_SPOTIFY_CLIENT_ID=<your id> REACT_APP_SPOTIFY_REDIRECT_URL=<your redirect uri> -
Start the development server:
yarn start
-
Open your browser and navigate to
http://127.0.0.1:3000.
🌐 2018 Version
There is also a 2018 version of this Spotify clone, which features the Spotify UI from that year. You can find the code for that version in the main-2018 branch.
- 2018 version branch: main-2018
- 2018 live demo: Check out the app
Feel free to explore the older version and compare the features and functionality between the two versions.
🤝 Contributions
Contributions are welcome! If you have any suggestions or improvements, feel free to fork the repository, create a new branch, and submit a pull request.
📝 License
This project is licensed under the MIT License. See the LICENSE file for details.