DEV Community

So I created Spotify Clone in React(kinda)

Ferdo Vukojević on August 12, 2020

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 ...

Read full post

bryanelalami • Aug 13 '20 • 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 .

Ferdo Vukojević • Aug 13 '20

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?

bryanelalami • Aug 13 '20

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;

bryanelalami • Aug 13 '20

Everything is working fine right now !

Ferdo Vukojević • Aug 13 '20

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

bryanelalami • Aug 13 '20

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 ?

Killian Frappart • Aug 12 '20

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.

Ferdo Vukojević • Aug 12 '20

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

Bento • Aug 12 '20

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 ;)

dm3xx • Mar 11 '21

dev-to-uploads.s3.amazonaws.com/up...

Yash Shah • Dec 25 '20 • 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?

Ferdo Vukojević • Jan 7 '21

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

Sumit Malviya • Aug 19 '20

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

gopi • Dec 8 '20

hey fredo i am encountering an issue after deployment

Le Thanh Viet • Jul 2 '21

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

dm3xx • Mar 11 '21

dev-to-uploads.s3.amazonaws.com/up...

Renan Oliveira • Aug 13 '20

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