https://github.com/surajv311/mymusicapp

A Music Player Web Application 🎶 built using ReactJS in the frontend and NodeJS in the backend. It uses Spotify's API to authenticate users and play music. 🎧
https://github.com/surajv311/mymusicapp

api nodejs npm reactjs spotify spotify-api spotify-web-api webapp

Last synced: 2 months ago
JSON representation

A Music Player Web Application 🎶 built using ReactJS in the frontend and NodeJS in the backend. It uses Spotify's API to authenticate users and play music. 🎧

• Host: GitHub
• URL: https://github.com/surajv311/mymusicapp
• Owner: Surajv311
• Created: 2021-05-29T07:26:04.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-28T17:52:56.000Z (about 3 years ago)
• Last Synced: 2023-08-18T11:54:16.785Z (over 1 year ago)
• Topics: api, nodejs, npm, reactjs, spotify, spotify-api, spotify-web-api, webapp
• Language: JavaScript
• Homepage:
• Size: 1.72 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Music app using Spotify's API

The frontend is built using React integrated with

Node backend to parse Spotify API requests to 

play music. 




![Login](https://github.com/Surajv311/myMusicApp/blob/main/pics/1.png) 


![Auth](https://github.com/Surajv311/myMusicApp/blob/main/pics/2.png) 


![Search Music](https://github.com/Surajv311/myMusicApp/blob/main/pics/3.png) 


----------------------------------------------------------

### To set up the project locally:

`Step 1`: Install dependencies using `npm i` in both client & server side. 


`Step 2`: Got to [Spotify_Dashboard](https://developer.spotify.com/dashboard/) and create a new app. 


`Step 3`: Make a note of the Client_Id & the Client_Secret. 


`Step 4`: In the edit settings of your dashboard put the redirect uri as : `http://localhost:3000/callback`. 


`Step 5`: Now got to your server dir. and create a `.env` file. 


`Step 6`: In the file declare your Client_Id, Redirect_uri, Client_Secret as : 

``` 

__REDIRECT_URI=http://localhost:3000/callback/

CLIENT_ID=(you made note of) 

CLIENT_SECRET=(you made note of) 

```




`Step 7`: To run the backend, use - `nodemon server.js`. 


`Step 8`: To run the frontend, use - `npm start`. 


`Step 9`: Done!. 


----------------------------------------------------------