Spotify Web Clone

Tech Stack

For this project I used React and Styled-Components as the frontend. I chose React because it's the library that I'm most familiar with for building user interfaces. As for Styled-Components, I chose this one because I like the way how you write the styling. It is similar to traditional CSS, but customizing styles depending on the state has never been easier. For the backend I used Express to handle the communication between the client and Spotify authentication. New technologies that I used in this project were TypeScript and Redux.

TypeScript is something I always wanted to try during my studies but never took the time to do it. Silly me was afraid that it would add an extra layer of difficulty to the assignments. Now that I have used it, I can say that I regret not trying it earlier. While the first few days were rough, it was definitely worthwhile getting through it. With the static typing I can solve any potential errors before I even run the code. It has also helped me code faster with the code completion that TypeScript provides.

As for Redux, I have seen many people recommend and use it in tutorials before. However I never had the feeling that I must include it in my projects too as it was too excessive for how small my applications were. Especially when you can use useContext from React instead. After using it on (in my opinion) a large project like this, I did notice some advantages. The most noticeable one for me was enforcing more structure in how you write code. It is easier to predict the code flow as most actions follow the same steps. Another advantage that is specific to this project is the convenience of having global state. Fetching data from the global state instead of making a new call has saved me from making so many redundant fetch requests.