What is Auragraph?

Auragraph is a web application for Spotify users designed by a music enthusiast, for music enthusiasts.

Auragraph aims to help users visualize the relationships between their favorite artists by generating colorful, interactive euler diagrams that we call, you guessed it, auragraphs.

Spotify recognizes over 5000 unique genres of music. That's a lot to wade through! We hope that auragraph will enable people to better understand musical taxonomy while enabling the exploration and discovery of new sounds.

How Does It Work?

Once you have logged in with your Spotify account (thanks Supabase!), your favorite artists are retrieved via the Spotify API. With your favorite artists in hand, we can get to work on generating your very own auragraph.

Spotify assigns each artist any number of genres, but for our purposes we only care about the genres where your favorite artists overlap. If we didn't cull the dataset your graph would be full of disjoint outliers. Lame!

After we have removed any outlying genres, the euler diagram is generated with D3 and venn.js.

Depending on how diverse your listening habits are, your auragraph might be quite dense and difficult to parse, but you can explore the chart by toggling genres with the button above your graph.

Supabase Integration

Supabase Auth

Auragraph leverages the Auth Supabase Spotify provider to connect with spotify and authenticate users. Protected routes are managed by next.js middleware as outlined in the Supabase docs. Spotify API calls are made using the provider_token retrieved from the user session.

Supabase Database

Once a graph has been generated, the data is stored using Supabase Database. This allows us to reduce load times and api calls after the first visit. The graph is loaded from the database with SSR, and if that fails, API calls are made client side.

Due to the Spotify Developer restriction requiring that I manually approve users before they can authenticate with OAuth I have also set up a "request access" contact form which is being stored in a Supabase table as well.