Project_Spotify.com

Deployed Link-.

https://ritikraj07.github.io/Project_Spotify.com/HTML/index.html

---

https://starlit-salmiakki-6e2eb0.netlify.app/html/

Hello, thanks for visiting the project. This was a project assigned to us by the Masai School, to clone the spotify website. Spotify is one of the world's most popular online music listening platform, which provides us millions of songs belonging to different regions, languages, and genres. On spotify we can create our own playlist and listen to songs as per our mood.

We have successfully maintained the UserFlow on our cloned website and have used HTML,CSS,JavaScript,API Fetch,DOM-Manipulation etc. throughout.

Our team consisted of 6 people.

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Names And Roles

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

1. Dilasa Thapa - Landing and Profile Page.

2. Priyadarshan Agarwal - Sign up and log in page

3. Amit Sisodiya - Home page and navbar

4. Ritik Raj - Built the search page and css to different parts of website

5. Vishawjeet Singh - Player box and footer signup.

6. Aman Ninave -Playlist page and player box.

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Description

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<--

API

-->

This is the free of cost spotify API which we are using to fetching data.

  https://api.spotify.com/v1/browse/categories/dinner/playlists?country=IN&offset=5&limit=10

For the Other documentation we can reference of the Spotify for Developers website.

    https://developer.spotify.com/documentation/web-api/

1) Dilasa Thapa has created the Landing page and profile page of Spotify Website.

Here is how page looks:-

=> profile page :-

=> When you want to go on to Home Page, it will show the pop up like you have to login first

=> Here is how that page looks:-

2) Now Comes the Create Account SignIn/Up, login, Priyadarshan has created these pages.

=> For that click on the SignIn/Up button of the navbar.

=> Here is how SignUp page looks :-

=> This is how Login Page looks like :-

=> After successful login, it will redirect the user to the home page and show user name at the top right corner of the navbar.

3) Now comes the Home Page, Amit Sisodiya has created the home page and side navbar of Spotify Website.

=> Here is how Home page looks :-

=> Here in Side Navbar having some pages link like Home, Searchbar,Library and play list

4) Now we come to the Searchbar page, Ritik raj has created this page of Spotify Website.

=> Here is how Searchbar page looks :-

=> Now, if we we are searching any song by using voice search mic or typing, the result will be displayed and we can play the searched song

=> Here is how Searchbar page looks after data searching :-

5) Now we come to the Playlist page which was created by Aman Ninave

=> In this page we are geting the data from a selected playlist from the many playlists available on the spotify website

=> Here is how playlist page looks :-

6)Now we come to the footer section, which has Audio player that was created by Vishawjeet Singh

=> In this section we can see the Audio player, if we are plaing any song, most of it's data is highlighted in this section like song name and artist. It has many features including play, pause, next song, previous song, shuffle, loop, like and dislike.

=> Here is how Player section looks :-