starred/spotify-react-web-client
1
0
Fork 0
mirror of https://github.com/francoborrelli/spotify-react-web-client.git synced 2026-04-25 19:36:01 +03:00
Code Issues 8 Projects Releases 1 Packages Wiki Activity
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.
392 commits 6 branches 1 tag 40 MiB
Find a file
Exact
Franco Borrelli 7e80561a31 chore: remove webpack-dev-server resolution from package.json
2026-04-02 14:23:47 -03:00
docker/nginx add dockerfile 2021-10-17 21:49:13 -03:00
images add new images 2024-09-01 20:40:11 -03:00
public add other device indicator alert 2024-09-01 16:07:49 -03:00
src fix imports 2025-12-29 14:22:40 -03:00
.env.dist fix auth 2025-12-29 12:46:40 -03:00
.gitignore add index 2024-09-01 17:38:02 -03:00
docker-compose.yml update yarn.lock 2024-05-24 14:13:17 -03:00
Dockerfile fix auth 2025-12-29 12:46:40 -03:00
LICENSE Add LICENSE 2018-09-28 14:20:14 +00:00
package.json chore: remove webpack-dev-server resolution from package.json 2026-04-02 14:23:47 -03:00
README.md Add alignment and badge to README 2025-12-29 14:15:52 -03:00
tsconfig.json start configurating new setting 2024-08-24 19:27:40 -03:00
yarn.lock chore: remove webpack-dev-server resolution from package.json 2026-04-02 14:23:47 -03:00

README.md

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://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.

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.