A full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.
Login with test account as de application still in development mode until verification.
Live app: https://spotifyme-profile.herokuapp.com/
Login info:
email: [email protected]
password: testaccount
-
Register a Spotify App in your Spotify Developer Dashboard and add
http://localhost:8000/callback
as a Redirect URI in the app settings -
Create a
.env
file at the root of the project based on.env.example
and add your uniqueCLIENT_ID
andCLIENT_SECRET
from the Spotify dashboard -
Install the correct version of Node
nvm install
-
Install dependencies
npm install
-
Run the React app on http://localhost:3000 and the Node server on http://localhost:8000
npm start
-
Create a Heroku app
-
Add your Heroku app as a git remote
heroku git:remote -a your-app-name
-
Add
http://your-app-name.herokuapp.com/callback
as a Redirect URI in your Spotify app's settings -
In your app's Settings tab in the Heroku dashboard, add config vars.
Based on the values in your
.env
file, theCLIENT_ID
,CLIENT_SECRET
,REDIRECT_URI
, andFRONTEND_URI
key value pairs. Make sure to replace thelocalhost
URLs with your heroku app's URL.REDIRECT_URI: http://your-app-name.herokuapp.com/callback FRONTEND_URI: http://your-app-name.herokuapp.com
-
Push to Heroku
git push heroku main