DEV Community

Cover image for So I created Spotify Clone in React(kinda)
Ferdo Vukojević
Ferdo Vukojević

Posted on

So I created Spotify Clone in React(kinda)

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

Body Page

Alt Text

Dynamic Slugs

Alt Text

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

Discussion (22)

Collapse
bryanelalami profile image
bryanelalami • Edited

Thank you Ferdo for your work, I'm super pumped to get this project done. But actually, I'm facing an issue. After so many researches, I'm stucked. I'm trying to add the play music functionality .

Error React JS

Collapse
fvukojevic profile image
Ferdo Vukojević Author

The play music functionality should already be implemented. If you can see your playlists, just click on the song so it is shown in the footer and then the play button should work.

2 potential issues could be that a specific track doesnt have a previrew url
Or that you didnt set up your spotify clientId and redirectUrl

Can you confirm that both of those things are set up correctly and that your playlist is pulled after login?

Collapse
bryanelalami profile image
bryanelalami

Spotify clientID and redirectUri are set up. The problems comes from

import React from "react";
import "./Body.css";
import Header from "./Header";
import { useDataLayerValue } from "./DataLayer";
import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled";
import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled";
import FavoriteIcon from "@material-ui/icons/Favorite";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import SongRow from "./SongRow";
import {useSoundLayerValue} from "./SoundLayer";

function Body({ spotify }) {
  const [{current_playlist, tracks, track}] = useDataLayerValue();
  const [{playing, volume}, soundDispatch] = useSoundLayerValue();

  const startPlaying = () => {
    soundDispatch({
      type: "SET_PLAYING",
      playing: true,
    });
    soundDispatch({
      type: "SET_VOLUME",
      volume: volume / 100,
    });
  };
  const stopPlaying = () => {
    soundDispatch({
      type: "SET_PLAYING",
      playing: false,
    });
  };
  return (
    
      
      
        
        
          PLAYLIST
          

Discover Weekly

{current_playlist?.description}

{playing ? : } {tracks?.items.map(track => { return ; })} ); } export default Body;
Thread Thread
bryanelalami profile image
bryanelalami

Everything is working fine right now !

Thread Thread
fvukojevic profile image
Ferdo Vukojević Author

I love to hear. The functionalities are just getting started. Right now play button, volume and repeat should work (volume has a bit of a bug on it). I will try to add functionality to shuffle/prev/next buttons today

Thread Thread
bryanelalami profile image
bryanelalami

We can do together if you want to ! What is the bug about he volume button ? What's the logic behind shuffle/prev/next buttons ?

Thread Thread
fvukojevic profile image
Ferdo Vukojević Author

The volume button doesn't seem to transfer it's state when you change the song while the one is playing. It will reset again to the starting position.

Yea getting the help from the community would be lovely because as I said, I am very much a newbie to React (would be a lot more comfortable in Vue.js)

So the functionality of buttons is quite simple really

  • Shuffle -> When the song ends, random one from playlist starts
  • Next -> Starts the next from the playlist (basically find the current one by id, and go next)
  • Prev -> Does the opposite, and starts the one previous in the playlist

After those footer functionalities I will start working on the Home & Search buttons. I might refactor the design prior to that šŸ˜

Thread Thread
bryanelalami profile image
bryanelalami

Would be great to collaborate and help each other !

I'm new as well in React Dev so that's I sound like a newbie.

Can you help me out with this ?

alt text for accessibility

Thread Thread
bryanelalami profile image
bryanelalami

There is also another problem that I'm facing... const redirectUri seems to be incorrect. When deploying the website with firebase , when logged in, it redirects me to localhost:3000 and because the server is down, it keeps me redirecting to the wrong URL

Thread Thread
fvukojevic profile image
Ferdo Vukojević Author

I would suggest you use your own clientId. It is very simple to get at developer.spotify.com/dashboard
RedirectUri gets pulled from window.location.origin so it should work as long as you setup inside your dashboard the same uri your app is hosted on.

So steps would be:
Go to spotify dashboard for developers, create an app, take the clientId and place it inside spotify.js file.
And then inside the spotify dashboard in edit settings, set the redirect url to match the url your app is hosted.

Thread Thread
bryanelalami profile image
bryanelalami

It would be great to jump on a call , are you available ?

Collapse
killianfrappartdev profile image
Killian Frappart

Well done! That is a great project šŸ˜

Unfortunately I was not able to log in, I tried to connect using my Facebook account but it would not let me log in for some reasons...

I don't know if someone experienced the same or if I am the only one.

Collapse
fvukojevic profile image
Ferdo Vukojević Author

If you have time you can try following instructions and try to set it up locally. Maybe the clientId is directly connected to users account and thats why it always works for me

Collapse
bento profile image
Bento

Nice project ! Did you deploy it on Heroku for example ? This way we could test it, i'tll be more fun for us than just to see screenshots of the app ;)

Collapse
gopigaurav profile image
gopi

hey fredo i am encountering an issue after deployment

Collapse
dm3xx profile image
dm3xx
Collapse
yashshah224 profile image
Yash Shah • Edited

I just want to ask why we can't play whole song? Why only 30 seconds?
What if i want to play the whole song?

Collapse
fvukojevic profile image
Ferdo Vukojević Author

Spotify api doesn't give you the full song. Makes sense, otherwise you could make your own up, upon their api

Collapse
dm3xx profile image
dm3xx
Collapse
renanosilva profile image
Renan Oliveira

Kudos for Hybrid Theory. You know what's good :)

Collapse
lethanhvietctt5 profile image
Le Thanh Viet

Here is my clone Spotify by using ReactJS, NextJS
Github: github.com/lethanhvietctt5/react-s...
I hope it will help everyone who is learning react and want to clone Spotify

Collapse
sumitmalviyaau8 profile image
Sumit Malviya

How can I get access token to fetch data from another API of Spotify itself..like the album , latest songs etc?