DEV Community

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

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

Diogo Goncalves
・2 min read

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.

Discussion (18)

Collapse
saroj990 profile image
saroj sasmal

Really liked it!

Collapse
diogo405 profile image
Diogo Goncalves Author

Thanks ✌️

Collapse
user__dogi profile image

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 Author

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 Author

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 Author

Thanks πŸ‘πŸ½

Collapse
nlaitan profile image
nlaitan

Why redux and not Context hook?

Collapse
diogo405 profile image
Diogo Goncalves Author

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 Author

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 Author • Edited

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

Forem Open with the Forem app