This is an Frontend Web App to search your own favorite songs and create your own playlists with Spotify! You can also find recommendations of songs from different genres. The project uses the Spotify Web API to interact with Spotify.

The major framework that was used to create this project is React.js and used different libraries such as:

• axios for networking with the Spotify Web API.
• React Router for navigational components in a single page application.
• Redux for state management.
• Material-UI for declaring some components.
• Typescript.
• Vercel for deployment.

To get started in running this app, make sure you have a recent version of Node.js installed and create your own client ID:

1. Login into Spotify Web API
2. In the dashboard, create a new app with the scope as playlist-modify-private.
3. You'll retrieve your own client ID.

After getting your own client ID, you can clone this repo:

git clone https://github.com/briancatraguna/Spotify-Clone.git

Then create a new file named .env under the main directory Spotify-Clone with the following contents where you need to put your client ID:

REACT_APP_CLIENT_ID = <YOUR CLIENT ID>

Note: Without wrapped by quotations

After putting the client id in the .env file you need to:

1. Install NPM packages

   npm install

2. Change the following code in Spotify-Clone/src/components/LoginButton/index.tsx to match the following:

   const LoginButton = () => {
    const MY_WEBSITE: string = "http://localhost:3000/callback"
    const REDIRECT_URL: string = `https://accounts.spotify.com/authorize?client_id=${process.env.REACT_APP_CLIENT_ID}&response_type=token&redirect_uri=${MY_WEBSITE}&scope=playlist-modify-private`
   
    return (
        <a href={REDIRECT_URL}>
            <Button variant="contained" color="primary" className="myButton">Login</Button>
        </a>
    )
   }

3. Run the following command

   npm start

1. Think of your own subdomain, can be anything. For example my-spotify, then change the code in Spotify-Clone/src/components/LoginButton/index.tsx with the const MY_WEBSITE as:

   const MY_WEBSITE: string = "https://my-spotify.vercel.app/callback

2. Setup your own remote GitHub repository with the cloned project inside it.
3. Go to Vercel and create a new project.
4. Import your GitHub repository.
5. Setup your project name, use the same you used in step 1. Your project name will be the subdomain continued by .vercel.app.
6. Setup the Environment Variables with the name as REACT_APP_CLIENT_ID and the value is your Client ID.
7. Click on deploy!

This is where you can login to your own Spotify Account!

In create playlist page, you can search your own favorite tracks and add it to your playlist! You can search any song you want and select them, then name your playlist and its description, you can submit!

We can also recommend you songs for you to listen if you are confused what to listen! We give you any possible genres! and browse away!