/react-spotify

Spotify clone version using ReactJS, Next.js

Primary LanguageTypeScript

React-Spotify

Preview

An application clones Spotify using ReactJS as UI library, Next.js for SSR, TailwindCSS as UI Framework, Redux for State Management and Spotify API. App requires access_token from user via Authorization Spotify to get informations about user, tracks, albums, playlist. Using Web Playback SDK to play full tracks, and user need a PREMIUM ACCOUNT to be able to play tracks

Homepage

alt text

Album

alt text

Playlist

alt text

Search

alt text alt text

Library

alt text

Features

  1. Login with Spotify Account
  2. See recently Tracks, Albums, Playlists
  3. See top Albums, Playlists
  4. Play full Tracks, Albums, Playlists
  5. Skip to the next track, go back to the previous track
  6. Pause/ Play music
  7. Change volume
  8. Get saved Tracks, Albums
  9. Search Artists, Tracks, Albums, Playlists
  10. Search by categories recommended

How to build and run

  • You need to create an app on Spotify API
  • Replace your CLIENT_ID and CLIENT_SECRET at ./spotify/_consts.ts
  • npm install to install packages
  • npm run dev to start development server

Techs

alt text