Hello friend !
I made a spotify clone to test my skills.
Here is the app i made : Spoty-like
And here is the source on github : spotify-like-web
The goal
I made this project as close as I could to the real Spotify. My goal was to make my app indistinguishable from the real version. I've had to copy some css but it allowed me to understand how to do certain tricks and how complex the real app was.
The project features two pages :
- Browsing featured playlists
- Browsing songs within a specific playlist
The tech side
Typescript
On the tech side, I started it with JSX but mid-way through the project, I figured that it was a great occasion to train my typescript knowledge so I switched over and it was quite nice !
I wish I started with TS since it brings auto-completion and it would have saved me some time. I would most likely use it again.
SCSS
Before that I've never worked with a css preprocessor but at some point, I didn't felt like learning anything on the design part. I was copying most rules and it was kinda tedious to get things right. So I switched to SCSS which made my code a lot cleaner (cleaner HTML and more organized CSS).
I didn't used every feature of SCSS but nesting rules was really cool to do.
API
When starting this project I had access to a spotify API that fetched data without any authorization. I've had to setup a local proxy in order to use the API locally and allow CORS for my project.
With that setup, I wouldn't though of deploying my app because it required a proxy. It wasn't very elegant and kinda sad that no one would see my project.
That's when I digged towards spotify for devs and I found that I could fetch the data I needed by creating a project.
Each request requires a authentication token so I created a system that stores a token using cookies. If the token is expired or unset, the app fetches one automatically and uses it for the request.
Player
As the the player used for sound, I did not user the one offered by spotify. Instead I used a library call react-sound which is fairly easy to use and works great. Since no login system is implemented, only a preview can be played.
The library allowed me to play / pause songs, adjust volume and time, basics functionalities.
Redux
I used Redux to manage the store and have it set globally since most components are using the same data. I combined stores with one that contains data and one that contains the playing song and its state.
Conclusion
I've had a great time building this app and I am proud that the app is as close as the real one and that it's simple to use and works great.
If you have any suggestion on how the app could be improved I would love to hear your recommendations !
Top comments (0)