DEV Community

Cover image for I've made a Spotify clone with React, Redux, and Typescript
Diogo Goncalves
Diogo Goncalves

Posted on

I've made a Spotify clone with React, Redux, and Typescript

Hello everyone, I'm sharing this Spotify Clone that I made with React, Redux, and Typescript. If you wanna head straight to the live version you can click on this link: http://spotifyclooone.netlify.app/.

Alt Text

If you wanna check the source code head to my Github by clicking here https://github.com/diogo405/spotify-clone.

About the project

The project is actually very simple, it's just two pages: Home and Album that pull data from a fake API.

Redux & Typescript

I'm not gonna lie if you are new to Typescript your chances to hate it gonna be 100%. Typing almost everything can be very painful for the first time. After a few components, you get used to it and sometimes it saves your ass. My advice is if you wanna taste Typescript start with a Javascript project, not React.

Redux is another thing that's not very pleasant (I've always been a fan of Recoil - simple and easy). They are trying to reduce the boilerplate with the toolkit - and it's better now - but still, there's a lot to be coded to get/set your state (especially with Typescript).

Fake API

The fake API is a set of async functions that return JSON files in a random interval of 0 to 3 secs. While the data is not ready, I'm using some skeletons as placeholders so the layout doesn't jump too much.

Alt Text

Conclusion

Experimenting with React and Typescript is very interesting as you learn a new way to develop with Javascript and familiarise yourself with a technology that I believe is gonna stay.

Top comments (18)

Collapse
 
saroj990 profile image
saroj sasmal

Really liked it!

Collapse
 
diogo405 profile image
Diogo Goncalves

Thanks ✌️

Collapse
 
user__dogi profile image
user__dogi

You are telling true i like it bro
Keep it up.. 🤙

Collapse
 
domnikl profile image
Dominik Liebler

Looks awesome, thanks for sharing!

Collapse
 
rajeshroyal profile image
Rajesh Royal

Please deploy the application on any of the cloud provider and share the live link.

Collapse
 
diogo405 profile image
Diogo Goncalves

You've missed the first paragraph of the article.

Collapse
 
rajeshroyal profile image
Rajesh Royal

Yes, Thanks

Collapse
 
nancyjain0631 profile image
Nancy Jain

Is there any API for playing songs?

Collapse
 
diogo405 profile image
Diogo Goncalves

Spotify provides a way to play songs using their SDK, check here:

developer.spotify.com/documentatio...

Collapse
 
nancyjain0631 profile image
Nancy Jain

Thank you.

Collapse
 
abhinav2127 profile image
Abhinav Jha

Nice Job Brother!

Collapse
 
diogo405 profile image
Diogo Goncalves

Thanks 👍🏽

Collapse
 
nlaitan profile image
nlaitan

Why redux and not Context hook?

Collapse
 
diogo405 profile image
Diogo Goncalves

Hey :) Could've been Context. Just wanna try TS with Redux like: "bring all the pain together" 😁

Collapse
 
hadihammurabi profile image
Hadi Hidayat Hammurabi

Some song are not playable

Collapse
 
diogo405 profile image
Diogo Goncalves

It doesn't play anything hehe. It's just placeholders 😁

Collapse
 
dammyreginal profile image
dammyreginal

Just checked it out. Looks clean. Ofcourse you know it takes a lot more to get it working for real. Like what you've done is nice but its just 1% of the effort 😂😂😂. I'm sure you understand.

Collapse
 
diogo405 profile image
Diogo Goncalves • Edited

Maybe 0.5% 😁 It's just to give an idea about developing with React, Redux and TS.