Spotify Clone
Introduction :
Spotify is Music application where we can Play/Pause, Repeat and adjust the volume of music.
Spotify application is cloned using the Spotify Web API and ReactJS is used for the implementation.
IDE:
Visual Studio
Hosting Environment:
Firebase - Web Hosting Platform provided by Google
Language used :
JavaScript: Defines the Behavior of the page.
HTML: Defines the content of the page.
CSS: Specify the layout of the page.
Creating ReactApp:
spotify-clone folder is created. This will be the main working folder, which needs to be opened. Once opened terminal will appear at the bottom of the screen
Below command is executed in terminal to insatll and setup ReactAPP:-
npx create-react-app
"Happy Hacking" will appear on the screen once the app is created
Execute the below command to start the React App:-
npm start
On successful execution the app will open in the Default Browser with the IPs and port mentioned. The same has been shown in the below screenshot
Firebase Setup:
Firebase would be used for hosting the web app. Follow the below procedure for the setup.
Firebase URL: https://firebase.google.com
Setting up Spotify Web API.
Use this link to go to Spotify Developer Dashboard " https://developer.spotify.com/ " .
- Login using your Spotify Account.
- On Dashboard Click "CREATE AN APP".
- A pop-up will appear which will require an app name and Description. Enter the necessary details and click on "Create". This will generate a Client Id and configuration details which needs to be referenced later.
Working on Spotify Configuration file.
Create a file named spotfy.js and paste the configurations generated in the above step. Make sure to use your own Client Id
Using Spotify WEB API.
To use Spotify WEB API and fetch all the details from Spotify, execute the command given below in terminal to get all necessary package.
npm install spotify-web-api-js
Creating the Player.
The Player consist of three sub components listed below:-
-Sidebar: where the playlists are shown.
-Body: where the songs and everything else are shown.
-Footer: which has button pause, play and volume control.
Package named Material UI Icons needs to be installed to work with Icons. Use the below command to install the mentioned package.
npm install @material-ui/core @material-ui/icons
Deployment.
Firstly firebase tool package needs to be installed to host the web app. firebase tool package can be installed using the below command.
npm install -g firebase-tools
Once the tool is installed. Login to Firebase and follow the instructions on terminal.
firebase login
Now initialize the Firebase in your project.
firebase init
Deploy the project to Firebase using.
npm run build && firebase deploy
Look of the application:
Comments
Post a Comment