So I created Spotify Clone in React(kinda)
Tags: javascript, react, spotify, frontend
Published: 2020-08-12 10:27:31

## Hello Community! 👋

Before I dive into the app, just wanted to give a few pointers, so nobody get's confused.

* This app is only created for fun. I decided to do it because I'm new to frontend and especially to React
* I was using the spotify api, and because of it all songs have a `preview_url` so they don't play in full, just first 30 seconds
* Huge shout out to youtube channel called Clever Programmer. They are the ones who started this project in React. They implemented the design and showed how the api works. I took it from there to actually make songs work, as well as the buttons that had no functionality. (Their app was just a 'design' clone with not a lot of functionality). 
* Because I was following someone else's design, the app ended up not being that responsive, and is probably best to be used with your pc's, laptops & tablets. 

#### How does it work

##### This app currently supports the following.

* Login with spotify api
* Get user playlists created on spotify
* Clicking on playlist displays songs on the screen
* Switch between songs, and play 30 seconds of them 
* Volume is adjustable

##### Things to be added in short future:

* Shuffle and Repeat buttons are functional ( Finished ✅ )
* Previous and Next buttons are functional
* You will be able to ❤️ your favourite songs and they will be placed in their own playlist
* Recreate design with bootstrap so the app is more responsive

#### Project Screenshots 

Login Page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gyzi69vp7kn87bd3tvpz.png)

Body Page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ix22uisoha550hv7vax5.png)

Dynamic Slugs 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6h2hpr6yb7f025qxft2l.png)

#### So what made me create this? 

As I already wrote above, I am new to frontend scene. I've been working as a software developer for the last 2 years, and my main focus has been more on the backend side of things. So creating api's, microservices, interacting with databases (nosql, sql, key value stores, etc.), dockers, etc. have always been my main focus.

Recently I decided to switch gears and try learning more about frontend. I picked up Vue.js pretty fast as it is probably the fastest and easiest frontend language to start with. I created bunch of little small apps, just testing how everything works, how lifecycles works, how it all connects to Vuex, etc.

Now I decided it would not be the worst idea to try something new (like React) so I can compare the two frameworks and have a better grasp on how they both work. Advantages and disadvantages of both.

You can clearly see by my code, that I am no expert when it comes to frontend, so please bare with me while I am trying to improve the code and add new features. While it might take only few minutes to some, I still have to spend some time on stackoverflow and pages alike to seek help whenever I get into trouble.

#### State of the app

This application is still in development. It is not close to being finished. I am trying to create issues and add new features as I go. Working doesn't give me a lot of spare time so my developing process is pretty slow. Also, being new to fronend doesn't help either.

You can see issues regularly being added to the repo and I will try to tackle them as I go.
 
#### What's next

Depending if the community wants, I would be very interested in recreating this app in Vue.js once I finish everything I want in React. That way, I can have a post created and going over benefits and flaws of both frameworks and which one is easier to learn for beginners. 

But please tell me if that is something you want to see. 

Kind Regards, and I am pretty new in this community so hopefully my posts make sense.

Github link: https://github.com/fvukojevic/Spotify-React-Clone