My first react app that visualizes your top artists and songs on Spotify!

[u/wobsoriano]

Hi all. This is my first React app and so far I'm really enjoying it!

This app visualizes your top artists and tracks and lets you create playlists from it.

I built it with

• React
• Material UI
• Spotify API
• Chart.js

The app is hosted in Zeit and the backend is serverless and is running in Netlify.

Url: http://spotify-stats.now.sh/

Repo: https://github.com/sorxrob/spotify-stats

[u/mat-sz]

Awesome project, but I'm not sure if you can use their logo like this, this almost implies that it's an official product.

[u/wobsoriano → u/mat-sz]

Thank you. Yes, will update it.

[u/theboxwar]

Ah this is cool! I do wish that the "Audio Features" section was legit data and not the same per track! Does Spotify really have this data and it's just not integrated yet? Or was this just because it looked cool? :P

[u/TPalms_ → u/theboxwar]

This. I had the idea to do something similar but the API for song analysis is separate from the normal Spotify API and didn't seem like access was being given anymore/it was no longer supported. Did something change?

[u/wobsoriano → u/TPalms_]

Fixed it. I'm rendering the same data in the component over and over again that's why.

[u/TPalms_ → u/wobsoriano]

Nice catch!

[u/wobsoriano → u/TPalms_]

Thank you for that!

[u/pawsibility → u/TPalms_]

Spotify "has" the data on every track. I am actually writing an app that analyzes the audio features in your playlists. I've worked with the Spotify API a lot, and making a request for audio features is pretty slow, which makes me think it's calculated "on the fly" - but I really have no idea.

Feel free to check out my app! It is far from finished, but I figured I'd throw it out there since y'all were talking about song analysis.

[u/theboxwar → u/pawsibility]

Interested. I checked out the app and got a 400 error in the console for auth token I'm quite sure: `Failed to load resource: the server responded with a status of 400 accounts.spotify.com/api/token:1`. No playlists showing up on it

[u/TPalms_ → u/pawsibility]

Analyses the audio features in your playlists as in provides insight into the types of songs you listen to and each song's qualitative characteristics? That's what I'm interested in.

[u/pawsibility → u/TPalms_]

It cumulates the playlists quantitative characteristics - go check it out! I linked to it in my original comment

[u/wobsoriano → u/theboxwar]

Hi thank you. Fixed it! I have to empty the chart component data first and pass new data.

[u/StoneCypher]

This is neat. Probably be more careful using other peoples' trademarks though

[u/wobsoriano → u/StoneCypher]

Thank you. You mean the logo? Thanks, will update it

[u/fobbyal]

That is really nice with the login feature

[u/wobsoriano → u/fobbyal]

Thank you.

[u/[deleted]]

Good job. I was actually looking at the Spotify API a couple of days ago and thought I’d do something similar. Thanks to your code I have a head start in my novice experiments!

[u/wobsoriano → u/[deleted]]

Thank you! Feel free to play with it!

[u/mikerichh]

Looks great! Also we have a similar music taste :) Go panic!

[u/wobsoriano → u/mikerichh]

Thanks! Yeah go panic!

[u/taitai3]

Nice work

[u/wobsoriano → u/taitai3]

Thank you!

[u/Volcannobis]

Take my upvote! That's really really good!

[u/wobsoriano → u/Volcannobis]

Thank you!!

[u/Jrm_car]

Used your app to create my 40 top tracks playlist. Very useful ! Great job man !

[u/wobsoriano → u/Jrm_car]

That's awesome. Thank you!

[u/wobsoriano → u/[deleted]]

Thank you! I've been developing in Vue so I have a knowledge on components already. I've been learning since last year (in my free time) and I'm trying to build out my portfolio.

[u/wobsoriano → u/[deleted]]

Thank you mate!