sounder-app

An awesome song-discovery and playlist-generator web application!
View Demo · Report Bug · Request Feature

About The Project

Sounder-app is a full-stack web application that uses the Spotify-Web-API to provide song recomendations based on the user's liked songs library.

With an intuitive flow and a tinder-like interface, the user can hear new track recomendations and personalize it by liking or disliking it. Additionally, the user is able to add all their liked songs to a new playlist and listen in their Spotify account.

Built with

• Express
• Spotify-Web-Api
• Passport
• Mongodb
• React

Getting Started

This project can be run on a local server or deployed to heroku or other platforms. To successfully run it locally, you will need to install node.js, npm and mongodb in your machine and set up some environment variables:

Installation

1. Register an application in Spotify and get a client_ID and a client_secret at https://developer.spotify.com
2. Add as redirect uris both http://localhost:PORT/auth/spotify/callback (for development) and <production_domain>/auth/spotify/callback (for deploy).
3. Clone the repo

git clone https:://github.com/pedrochiossi/sounder-app.git

4. Install NPM packages

npm install

or

yarn

5. Create a .env file and enter your spotify client ID and Client Secret, Callback URL as:

APPKEY='ENTER YOUR CLIENT_ID'
APPSECRET='ENTER YOUR CLIENT_SECRET'
CALLBACKURI='ENTER SPOTIFY CALLBACK URL FOR AUTH'

6. Enter a PORT and a mongodb URI in .env as:

PORT=8888
MONGODB_URI=mongodb://localhost/sounderApp
CLIENT_URL=http://localhost:3000

Running

• On development, run npm run dev or yarn dev.
• On production, make sure you build react with cd client && yarn build
• and run npm start or yarn start.

How to use

• Click on the image to play or pause the 30s audio preview
• Like or dislike it to fetch a new song
• You can listen all your liked tracks again and add them to a new playlist

Acknowledgements

• Material-UI
• color-thief
• freefrontend
• spotify-web-api-node
• passport-spotify
• LGK Music Player