Skip to Content
Author's profile photo Noel Weber

Spotify Statistics App | Built with UI5

Spotify Statics is a website built with open source UI framework, OpenUI5. You can use the website to see your top tracks, top artists and you can use it as a web player.

I am an apprentice at an IT company and I did this application to get started with UI5. This is my first web application using an API. The aim was to create an app which doesn’t look like standard ui5 elements.
You can find a working Demo right here: https://flmawit.github.io/

Aswell as the source code: https://github.com/flmawit/flmawit.github.io

 

To use the Website make sure you have Spotify running on your Computer!

First you must login on the page with your Spotify account. The login will be done directly from Spotify!

If you’re logged in you can use the website. You can skips songs, change songs, change the volume, search songs, show your top 50 songs in a donut chart, show your top artist in a list and you can see the related artist to a song which is playing right now.

With the search bar you can search songs and artists. If you search an artist the website plays a random song from this artist. If you search a song it plays this song you searched.

The donut chart is interactive. If you press a segment of the chart, Spotify will play a random track from the artist or the genre (depends on the button you have activated).

The list is also interactive and it does the same thing as the donut chart.

The list in the Icon Tab bar shows you your top 50 tracks and top artists. With the buttons at the top you can change the time. If you have selected 1 Year the list will show you your top 50 tracks over 1 year and your top artist.

Assigned tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo David Lapointe
      David Lapointe

       

      Hi Noel, Great  app!!! Nice work also on theming.

      Author's profile photo Noel Weber
      Noel Weber
      Blog Post Author

      Thank you.

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      very good first API project for you being an apprentice. Welcome to sapui5 or openui5. I like the way you used MVC, good separation of concerns, modular approach. my only advise would be to see if you could split your one controller into maybe another js lib for any possible reuse of code, however, this being your first API project, it is very impressive for a first timer. I echo David in the theming, great UX using a different theme. well done Noel, - please continue to share these type of blogs, it will definitely make you better as a developer, and you will also help the community.

      Author's profile photo Noel Weber
      Noel Weber
      Blog Post Author

      Thanks for your feedback.

      Author's profile photo Mac Donald
      Mac Donald

      Hi Noel, Nice work!!! The app is really good....

      Author's profile photo melvin poinoosawmy
      melvin poinoosawmy

      Hi, very nice App !

      How can I implement one using the WebIDE please ?

      I have issues using the Spotify API with this IDE.

       

      Best regards

       

      Author's profile photo Muzamil Killer
      Muzamil Killer

      Thanks. Great app, now I know all statics that I need. 

       

      Author's profile photo Rele Rossou
      Rele Rossou

      In my opinion, as a Spotify user, this is an awesome app because Spotify suggests to us about our interest related videos and songs but what's going on outside that box should also be important for most of us. Thanks for giving us such an amazing statical app.

      Author's profile photo Sheikh Sumaira
      Sheikh Sumaira

      Thanks For Sharing This Information. 

      Author's profile photo Aoife Awen
      Aoife Awen

      Hi Noel, Great  app!!! Nice work. Thanks For Sharing This Information.

      Author's profile photo John Mark
      John Mark

      Good Information.
      Economics tree