/Spotify-Mimic

Spotify Mimic is a website that is close to Spotify *Live demo available*

Primary LanguageTypeScript

Spotify Mimic is a website that is close to Spotify and built with React

Netlify Status

Table of Contents

⚠️ Note

To use the website on the Live Demo

  • One option is to use the Throwaway Account with the following credentials:

    -- Username: 31lcjfgvrytwvvo36tmyuuus2v2u

    -- Password: testAccount

  • The other option is to use your own Spotify account, but in order for it to be granted access to the Spotify Public API's dashboard, Please provide me with your Email Address either by contacting me on my E-Mail or my LinkedIn.

👨‍💻 Technical Overview For the Project

Technologies & Tools used :

  • Spotify Public API
  • Vite
  • TypeScript
  • React
  • Chakra UI
  • Redux Toolkit
  • Axios
  • React Icons

🌍 General Overview For the Project

This is a project based on being a website that is close to Spotify website, It consists of 7 pages

  • Login page
    • a welcome page and a login to Spotify using the method of your choice.
  • Home Page
    • a page showing your created & liked playlists, featured playlists, category browsing, and new album releases (Only the first 7 of each).
  • Songs Page
    • a page displaying playlists/albums/liked songs of a certain id depending on the URL.
  • Account Page
    • a page showing the user's profile details, as well as the user's top played tracks/artists, and the user's public playlists.
    • a page displaying a certain account's profile details, and the account's public playlists.
  • Artist Page
    • a page showing the artist's details, the artist's top 10 popular songs, the artist's albums, as well as some suggested artists.
  • See All Page
    • a page displaying the rest of featured playlists, categories, each category's playlists, new album releases, and a certain artist's albums depending on the URL.
  • Search Page
    • a page to search for a certain name of a/an song/artist/playlist/album.

📄 Pictures of the website






📋 To Do

  • Create a README file.
  • Follow & Unfollow (artist/user/playlist/album).
  • Create a playlist.
  • Add & Remove songs from a created playlist.
  • Add music player.
  • Change the user's previously created playlist image.