paolotiu / recome

Get recommendations exactly the way you want them. With multiple metrics to adjust you can find new songs recommended for you by you.

Aside from recommendations there are other cool things to see. Recome is able to generate photos of your top tracks and artists from various time ranges. Recome also makes an analysis based of the tracks you saved and visualizes them into charts and graphs.

Recome is built with React Typescript, NodeJS, and is hosted on Netlify with Netlify Lambda functions.

Installation

$ git clone https://github.com/paolotiu17/recome.git
$ cd app
$ yarn install
$ cd ../server
$ yarn install

Recome was first built with a NodeJS server, but eventually ported over to lambda functions. The server folder works exactly the same way as the netlify_functions folder.

Creating a spotify app

Recome needs Spotify authentication to function.

1. Login to your Spotify Dashboard and click Create an App
2. Give your app a name and description, accept the terms, and click Create
3. The app view will open. Click on Edit Settings and add http://localhost:8888/.netlify/functions/callback or http://localhost:8888/callback to the Redirect URIs field depending on which kind of server you choose

More detailed instructions can be found on the Spotify Developers page

Setup

This section will be divided into 2 paths. The first is if you'll be using netlify/lambda functions. The second is for a seperate NodeJS server.

Path #1: Netlify Functions Integration

Configure your user variables

In /app create a .env file and replace your credentials with the template below.

REACT_APP_LOGIN_URL=http://localhost:8888/.netlify/functions/login
SPOTIFY_CLIENT_ID=<YOUR_CLIENT_ID_HERE>
SPOTIFY_CLIENT_SECRET=<YOUR_CLIENT_SECRET_HERE>
APP_URL=http://localhost:8888/landing
REDIRECT_URI=http://localhost:8888/.netlify/functions/callback

Running the website

$ cd app
$ netlify dev
// Website is live on https://localhost:8888

 

Path #2: Seperate NodeJS server

Configure your user variables

In the /app folder create a .env file then copy and paste the line below.

REACT_APP_LOGIN_URL=http://localhost:8888/login

In the /server folder create a .env file and replace your credentials with the template below.

SPOTIFY_CLIENT_ID=<YOUR_CLIENT_ID_HERE>
SPOTIFY_CLIENT_SECRET=<YOUR_CLIENT_SECRET_HERE>
REDIRECT_URI=http://localhost:8888/callback
APP_URL=http://localhost:3000/landing

Running the website

$ cd app
$ yarn start
// Website is live on https://localhost:3000

$ cd ../server
$ yarn dev
// Server is now live on https://localhost:8888