breeku / songsterify

Browse Spotify for tabs from Songsterr

Songsterify

Songsterify combines Songsterr and Spotify to make it easy to find new songs to play!

Browse your favourite playlists / albums and discover tabs that you did not know exist.

🎵🎸🎶

Development

./.env

KEY	VALUE	Required
PORT	3003	Yes
CLIENT_ID	You can get this value from Spotify Dashboard	Yes
CLIENT_SECRET	You can get this value from Spotify Dashboard	Yes
CALLBACK	It must point to client /callback/, you also need to set this in Spotify Dashboard	Yes

./client/.env.development

KEY	VALUE	Required
REACT_APP_DEV_CALLBACK	Same as above, and in Spotify Dashboard	Yes

Installing dependencies

From root npm install then cd client and npm install.

Running development mode

From root npm run start then cd client and npm run start

Development client should start in port 3000, and server in port 3003.

Building

From root cd client then npm run build. You can view the built app with npm run start from root.

Tests

./cypress.env.json

KEY	VALUE	Required
refreshToken	You can get this from your cookie after logging in	Yes

Running tests

Without coverage and with servers running you can npx cypress open.

If you want coverage, you need to run servers with different commands.

From root npm run start:coverage then again in root npm run start-ci.

Now if you run tests with npx cypress open, there will be coverage report in ./coverage/ , which you can open with browser. Alternatively you can run npm run report:coverage:text

songsterify's Issues

Implement search/browse

Fix axios interceptors

1.

User comes back to site after accesstoken from cookies has expired, accesstoken will get refreshed but calls to /recent and /playlists wont be recalled

2.

User navigates from / to /playlist or /album, GET_RECENT gets called for no reason

Tests for frontend

Add Redux Toolkit

To reduce boilerplate
https://redux-toolkit.js.org/

Add redis

redis

For caching tabs most likely

Contrast issues

There are visibility problems on:

Search page
Appbar icons

Use notistack instead of snackbars

notistack

Tests for backend

Responsiveness

Everything expect sidebar is quite responsive

Generate playlist's for certain tunings

Maybe?

Add ExpressJS Async Errors

Reduce boilerplate
https://github.com/davidbanham/express-async-errors

Add ability to filter tracks

For ex. tuning

Create a logo

Can be added to appbar, also site needs a favicon

Support for more different tunings&instruments

Improve login page

To make the site more enticing from first glance