Skip to content

Simple Spotify app for learning React + GraphQL

Notifications You must be signed in to change notification settings

patrjam/spotify-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Spotify app

This repository was created as a toy learning project for technologies as a React, Apollo GraphQL & ChartJS. Project also uses Spotify API for server in own defined schema.

Dev requirements

  • installed yarn
  • installed node with minimal version 16.X.X

Used endpoints

Fetch data from endpoints

Connecting to data always needs to be authorized by Oauth token. Token has different roles for different data. In this repository were used 2 types of Bearer tokens, which you need to generate.

Warning Token expires after some time.

Generate Bearer token (deprecated)

For standard endpoints calling, it possible to generate token here:

https://developer.spotify.com/console/get-featured-playlists/?country=&locale=&timestamp=&limit=&offset=

- Copy token into .env file in /server/root - This token covers app parts: /, /playlists and /search-track

For /followed-genres is needed to generate token here https://developer.spotify.com/console/get-following/?type=artist&after=&limit= and check required scope user-follow-read.

Login into app

Generate CLIENT_ID & CLIENT_SECRET

Server environment variables (secrets)

  • copy file .env.copy from /server/root and rename it to .env
  • copy values of CLIENT_ID and CLIENT_SECRET into .env file

Client environment variables (secrets)

  • copy file .env.copy from /client/root and rename it to .env
  • copy values of REACT_APP_CLIENT_ID into .env file (value is the same as CLIENT_ID)

Note: On the client side with React, environment variables need to start with prefix REACT_APP_.

Note2: Is needed to restart application after adding variable in .env file.

Warning: Do not store any secrets (such as private API keys) in your React app!

App final design and implemented functionality

Login component

login

  • called if API returns 401 from the server and user is not authenticated with non expired access_token
  • after submit button and login to spotify.com as standard user, logged user has generated and saved access_token into local storage with key spotifyToken
  • if this token expired, user needs to click on Login to button again and token is automatically generated again

Home page

home

  • returns info about logged user

Playlists page

playlists

  • returns users playlists, it is possible to sort ASC/DESC by playlists name
  • every playlist card has link button, with which is possible to open playlist on Spotify

Search songs page

search

  • returns searched tracks
  • is possible to listen 30s song/track preview inside the page

Followed genres

chart

  • returns users followed genres
  • data shows into doughnut chart graph

Toaster messages

warning

  • returns, if there is some error from API communication

Frontend part

Client readme

Backend part

Server readme

Linter

This repository uses eslint, which is also running in pipeline after push code into branch or merge into main.

Releases

No releases published

Packages

No packages published