akhil-sharma/kord-app

Spotify, Soundcloud, and YouTube all in one website!

Kord App

Kord: One place for all of your (Spotify | Soundcloud | Youtube) music.

Chromium and Firefox browsers supported only.

Built With

• React.js
• Gatsby.js
• Redux
• SCSS
• Express.js
• Postgresql
• Passport.js

Getting Started

Prerequisites

• Node (v11.12.x)
• npm or yarn
• nvm

Installation and Setup

Express is served on port 8888 (localhost:8888/)
Landing page (Gatsby) is served on port 8000 (localhost:8000/)
Application (Create React App) is served on port 3000 (localhost:3000/app)

Running The Development Server

Changing your node version (if necessary)

$ nvm use 11.12.0

Using Yarn:

# install dependencies
$ yarn

# start servers
$ yarn dev

Using npm:

# install dependencies
$ npm install

# start servers
$ npm dev

Environment Variables

Server Variables

Development server variables are stored in a ".env" file at root

NODE_ENV=development
SPOTIFY_CLIENT_ID=XXXXX
SPOTIFY_CLIENT_SECRET=XXXXX
YOUTUBE_CLIENT_ID=XXXXX
YOUTUBE_CLIENT_SECRET=XXXXX
DATABASE_URL=XXXXX
JWT_SECRET=XXXXX
JWT_TOKEN_EXPIRE=XXXXX

# Callback Variables
SPOTIFY_CALLBACK=XXXXX
SPOTIFY_LINK_CALLBACK=XXXXX
YOUTUBE_CALLBACK=XXXXX
YOUTUBE_LINK_CALLBACK=XXXXX

The callback variables handle backend endpoints for Oauth authorization (Redirect URIs). You will need to add these URIs to your list of authorized origins on their respective platforms. Google calls them "Authorized JavaScript origins" and Spotify calls them "Redirect URIs"

# Development callback variables
SPOTIFY_CALLBACK=http://localhost:8888/auth/spotify/callback
SPOTIFY_LINK_CALLBACK=http://localhost:8888/auth/spotify/link/callback
YOUTUBE_CALLBACK=http://localhost:8888/auth/youtube/callback
YOUTUBE_LINK_CALLBACK=http://localhost:8888/auth/youtube/link/callback

# Production callback variables
SPOTIFY_CALLBACK={DOMAIN_BASE}/auth/spotify/callback
SPOTIFY_LINK_CALLBACK={DOMAIN_BASE}/auth/spotify/link/callback
YOUTUBE_CALLBACK={DOMAIN_BASE}/auth/youtube/callback
YOUTUBE_LINK_CALLBACK={DOMAIN_BASE}/auth/youtube/link/callback

Application Variables

Development app variables are stored in a ".env.development" file in the "client" folder

REACT_APP_SC_KEY=XXXX
REACT_APP_YT_KEY=XXXX
REACT_APP_SENTRY_DNS=XXXX
REACT_APP_LAST_FM_KEY=XXXX