RiahiKarim / headfon.es

a mini Spotify clone 🎧

client setup

• create-react-app base template for the setup. Currently it is non-ejected.
• react 16.5
• @reach/router routing
• react-copy-write state management
• typescript type system
• Spotify Web Playback SDK

server setup

• Node.js server platform
• GraphQL data transport
• Spotify API Spotify Web API
• typescript type system
• MongoDB database local
• mLab database cloud

TODO

• Review Accessibility + Improvements
• Mobile Friendly UI Improvements
• React 16 Profiler Exam (performance)
• Improve Search Results (currently listings are limited)
• Artist Page ...

local database

• mongoDB

address environment variable: MONGO_DB_URI_DEV

production database

• mLab or another hosted mongo cloud solution

address environment variable: MONGO_DB_URI_PROD

environment variables

DEBUG=false

PROD_HOST=http://localhost
DEV_HOST=http://localhost
PROD_PORT=3000
DEV_PORT=3004
SESSION_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXX
SPOTIFY_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXX
SPOTIFY_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
SPOTIFY_REDIRECT=/auth/callback
JWT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
MONGO_DB_URI_DEV="mongodb://localhost:27017/<database-name>"
MONGO_DB_URI_PROD="mongodb://<username>:<password>@<instance>.mlab.com:13402/<database-name>"
JWT_ISSUER=spotify-app-dev
JWT_AUDIENCE=spotify-app-user

running locally

To get the client and server code up and running:

yarn install-deps
yarn start-dev

You will also need to be running an instance of MongoDB

mongod

deployment

This can be deployed using a service such as now:

git clone https://github.com/mjw56/headfon.es
cd spotify
now -e SESSION_SECRET=XXXXXXXXXXX -e SPOTIFY_CLIENT_ID=XXXXXXXXXXX -e SPOTIFY_CLIENT_SECRET=XXXXXXXXXXX -e SPOTIFY_REDIRECT=/auth/callback -e JWT_SECRET=XXXXXXXXXXX -e MONGO_DB_URI_PROD=XXXXXXXXXXX -e JWT_ISSUER=XXXXXXXXXXX -e JWT_AUDIENCE=XXXXXXXXXXX

domain

aliasing to a domain is easy with now

now alias <now-url> <domain>

writing

• GraphQL Authentication with Passport

• GraphQL Authentication using OAuth & JSON Web Tokens

• Multi-Environment MongoDB

• Dynamic App Themes with CSS Variables and JavaScript 🎨

issues

If you run into any issues, if something is not working or doesn't make sense, please don't hesitate to file an issue.

license

MIT

Happy Hacking!