dphogit / my-spotify

A Next.js web application that helps visualize your spotify profile, behaviour and stats

---

Visualize My Spotify

🚀 Description

A Next.js web application that helps visualize your spotify profile and behaviour using:

• Spotify Web Api for spotify data
• Mantine for components and UI
• NextAuth for authentication

💻 Getting Started

Spotify

Create a spotify account if you don't have one then access the developer dashboard. Register a new application and the following redirect url: http://localhost:3000/api/auth/callback/spotify. If you are using a different port from 3000 then update the redirect url accordingly. You will need the Client ID and Client Secret for the next step.

Installation And Setup

Install dependencies

yarn install

Environment Variables

Create a .env.local file in the root of the project and add the environment variables:

SPOTIFY_CLIENT_ID=<your-spotify-client-id>
SPOTIFY_CLIENT_SECRET=<your-spotify-client-secret>
NEXTAUTH_SECRET=<your-nextauth-secret>

# The NEXTAUTH_URL environment variable is only needed for deployment, it may be useful to set it locally for previewing git branches on Vercel.
# https://next-auth.js.org/getting-started/example#deploying-to-production
NEXTAUTH_URL=http://localhost:3000

Refer to the .env.sample file as a reference.

Run the development server on localhost:3000

yarn dev

Usage

Upon running the development server with yarn dev you will be able to access the application on localhost:3000. Click on the Login with Spotify button to authenticate with your spotify account. The spotify web api authorizes using OAuth which NextAuth handles for you with a Spotify provider.

This application is gated behind authentication. Upon your first time logging in (or when authorization scopes change) you will be requested to give permission to authorize the application to access your spotify data. Once authenticated/authorized you will be able to use the application.

More details will be added to the docs when required, but these links should be helpful for now to understand how authentication/authorization works in this application:

• NextAuth Documentation
  • Explanation On OAuth Providers
  • Spotify Provider
• Spotify Web Api Documentation
  • Authorization Guide
  • Authorization Scopes
  • Web Api Reference

📕 Dev Documentation

The practices and guidelines for this repository are inspired by Bulletproof React with some minor adjustments due to the project being a Next.js application instead of a React application.

The docs folder contains some useful information and tutorials/explanations on how some things work in this application/codebase. The following links are a good place to start:

• 🏢 Project Structure
• 🤘 Interacting With The Spotify Web API
• 🧪 Testing

🚀 Deployment

Deployment is handled by Vercel. The master branch is the production branch and staging branch is to mimic production. Branches should be merged into staging to see if it works in a production-like environment before merging into master.

my-spotify's Issues

Refresh Token Rotation

Spotify API token is valid for an hour before it expires. Provide refresh token rotation such that the user always has a valid token before making a request to the spotify api.

Currently user has to log out and log back in to get a new valid token.

Useful NextAuth Documenation

Improve UI/UX of spotify login errors

Is your feature request related to a problem? Please describe.
When clicking 'Login With Spotify' and some various error occurs it would be nice to have some provided UI. This hasn't happened in production envrionments yet but has happened in local environment a couple times (e.g. incorrect project config - invalid redirect uri).

Describe the solution you'd like
Improve UI/UX of errors occuring when trying to sign in, however should not compromise the ability for the developer to trace/fix the error.

Describe alternatives you've considered

• A separate page which is documented here
• Update the UI on the sign in page to reflect an error

Additional context
Make some UI changes for user and keep traces/error messages in logs for developer.

App-Wide Error Handling

Is your feature request related to a problem? Please describe.
At the moment errors are handled locally but as more features are being built, it seems reasonable to add an app wide handling of error boundary because it is easy to forget or miss some unknown error.

Describe the solution you'd like
Custom app wide error handling, specifically for the client.

Describe alternatives you've considered

• React Error Boundary API. Good article here.

Add testing configuration

Is your feature request related to a problem? Please describe.
As app grows, need to start adding testing (mainly integration testing)

Describe the solution you'd like
Testing librarys are already installed, just need to configure Jest.

Pages to view top artists and top tracks

Describe the solution you'd like

• A separate page each for a user's top artists and top tracks
• Should be able to filter these top items by time range (last 4 weeks, last 6 months and all time as per the Spotify Web API reference)

User avatar image cannot be found in header

Describe the bug
The user's avatar image does not display (cannot be found) in the app header. It displays the alt text instead.

To Reproduce
Login to app and see the bug on RHS of app header (top right of screen)

Expected behavior
Show the user's spotify profile picture.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Edge
• Version: 110.0.1587.50

Additional context
Most likely how next.config.js is setup regarding image remote patterns. At the moment the hostname is set to scontent.fmaa10-1.fna.fbcdn.net which is a hard coded value. This worked in local environment but in prod environment the url has changed to scontent-mia3-1.xx.fbcdn.net.

This needs to be generalized to handle more than just accounts that spotify created via facebook because it seems to be from a facebook CDN as well.