Skip to content

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.

License

Notifications You must be signed in to change notification settings

francoborrelli/spotify-react-web-client

Repository files navigation

🎧 Spotify React Web Client

Spotify React Typescript Redux

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-client-id
    REACT_APP_REDIRECT_URI=http://localhost:3000/callback
    
  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.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published