Skip to content

Latest commit

 

History

History
128 lines (83 loc) · 4.62 KB

README.md

File metadata and controls

128 lines (83 loc) · 4.62 KB
Raw

Spotify Badge React Badge Typescript Badge Redux Badge

🎧 Spotify React Web Client

Important

Spotify Playback requires users to authenticate with a valid Spotify Premium subscription.

gif

🚀 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.

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.