Light

mwilc0x / headfon.es Goto Github PK

View Code? Open in Web Editor NEW

66.0 1.0 16.0 3.88 MB

a spotify clone 🎧

Home Page: https://headfon.es/

License: MIT License

TypeScript 86.69% JavaScript 1.32% HTML 1.37% SCSS 10.62%

react nodejs graphql oauth2 create-react-app architectural-patterns spotify music

headfon.es's Introduction

What is this?

This is an app that leverages the Spotify API for listening to music. It has basic search functionality for albums, songs, playlists. It's built on React, TypeScript, GraphQL and NodeJS.

Setup

Requirements

NOTE

Currently this only supports up to Node v14. I need to move away from node-sass-chokidar as it is now deprecated. This project is still using node-sass ~v4 and this does not support node > v14.

Steps

add environment variables
mongod
yarn run install-deps
yarn run start-dev

This will install everything and open the app in browser. If something is broken, please file an issue so I can fix! Want to make this setup as painless as possible.

Environment Variables

these can live in an .env file under /server

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=""
JWT_ISSUER=spotify-app-dev
JWT_AUDIENCE=spotify-app-user

Writing

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!

headfon.es's People

Contributors

Stargazers

Watchers

Forkers

anthonig azarual productinfo keenbaffling khocef refatrar tristargod tridungle alfonmga riahikarim avi202020 anithaamarnath tbazelczuk bkalmuk monmon4 triqzplayz

headfon.es's Issues

Deployment Issues

I'm having trouble deploying the app. I'm getting the error:

TypeError: JwtStrategy requires a secret or key

I have a process.env file in the root with all the variables but it doesn't seem to be working.

Improve Player Controls

The Player Controls could use some love. Currently you can't scrub. It doesn't properly update with time updates from external (i.e. scrubbing from Desktop). There are probably some other issues with it as well.

Store User Search Queries in Local Storage

We should store the user search queries in local storage so that they could just click from a list on /search/recent.

We could use a localStorage hook for this.

Search Input Auto Suggest

It would be rad if the search input text box would auto suggest.

We could do artists as a start. It would probably need to poll from an API. We could use a debounce hook for fetching.

Improve Artist Page

The Artist page needs some love.

Consolidate GraphQL Client Queries into a Folder

Is your feature request related to a problem? Please describe.
Right now in the code the client GraphQL queries are hidden inside the components.

Describe the solution you'd like
They should be brought up and all placed in a single folder which components can then pull from. This will allow us to keep a nice record of all possible queries and not have any duplicates.

Additional context
Add any other context or screenshots about the feature request here.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.