🎧 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:

1. Clone this repository:

   clone https://github.com/francoborrelli/spotify-react-web-client.git

2. Navigate to the project directory:

   cd spotify-react-web-client

3. Install dependencies:

   yarn install

4. Set up your Spotify Developer account and create a new app to obtain your Client ID and Redirect URI. Add these to an .env file in the root of your project:

   REACT_APP_SPOTIFY_CLIENT_ID=<your id>
   REACT_APP_SPOTIFY_REDIRECT_URL=<your redirect uri>
   

5. Start the development server:

   yarn start

6. Open your browser and navigate to http://localhost: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.