 |
| Spotify Statistics Web App |
Spotify Statistics Project (GitHub)
Today I'll be presenting my first coding project. This one started spontaneously when I found out that Spotify allows easy access to its API as long as you have a developer account.
At first, I started to explore it using Node JS hoping to build a back-end system. There's nothing much to say here, because I realized I could just use the API directly from the website. But I did learn about the OAuth 2.0 Authorization framework! This was my first time doing it and I understand why it's widely used. Before I learned about it, I used a simple JWT authorization system.
So, after realizing the potential of this project as a full-on website I started working on it using Angular just because it was the framework I'm most familiar with.
Spotify Web App Profile Page (Angular version)
After the fun part of making OAuth 2.0 work, came the UI/UX design. I admit I have little experience with UI, but I have a good understanding of the importance of UX specifically and some experience from my time in college. My first goal was to make everything fit in one page and generally follow the theme of Spotify's app in terms of colors, just to make the website more familiar to the user. I tried to limit the number of information the user sees about their profile, so I just included the number of followers and playlists they have, and also their top genre.
I am mostly proud of the loading skeleton and the banners showing user's top artist and track. I didn't have a lot of design ideas when I started the project, these two might be the only ones I thought of at the beginning. And I'm very happy with the results!
I'm also very happy with how I'm showing user's playlists. Pagination was very important for me to do, and it had to be done right to make the website more efficient.
 |
| Spotify Web App Stats Page (Angular version) |
The statistics page is where you'll find your top 10 artists and tracks in the selected period. This is where I hit a creative block and didn't know to proceed with the design, so it remains unfinished except for the main functionality.
Spotify Web App (React version)
Next, I wanted to practice using React and see how it differs from Angular. So, I decided to transform this project into a React project.
I was very excited to undertake this project for several reasons. Firstly, it presented an opportunity to learn React. Secondly, I knew I will encounter new challenges when designing these components using JSX. It was strange at first, coding HTML-like tags inside a JS file. I noticed the between the two frameworks, and its mostly the difference between JavaScript and Typescript, so mainly typing. I also liked the way React handles transferring data between components (props) more than Angular (inputs & outputs).
Thirdly, I was excited about transforming this project into React is because I knew I'll come up with better ideas and designs. You may have noticed, for example, the improved loading skeleton and its more accurate representation of the loaded page. I also made changes to the profile page to emphasize user's data. This project does not include a stats page, not even a fresh look at the project helped avoid that creative block.
I am not planning on publishing this project for the public. It was just for me to practice building an SPA twice to see if I can replicate the process using two different frameworks. But who knows? maybe it will become a foundation for a project that actually gets published. I'd have to come up with ideas to make it very interesting and unique though, there are a lot of these "Spotify Statistics" websites out there!
