Brian's - Spotify 🎶

About The Project

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.

Built With

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.

Getting Started

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

Login into Spotify Web API
In the dashboard, create a new app with the scope as playlist-modify-private.
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

How to run in local

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

Install NPM packages
```
npm install
```

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

Run the following command
```
npm start
```

How to deploy your own app

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
```
Setup your own remote GitHub repository with the cloned project inside it.
Go to Vercel and create a new project.
Import your GitHub repository.
Setup your project name, use the same you used in step 1. Your project name will be the subdomain continued by .vercel.app.
Setup the Environment Variables with the name as REACT_APP_CLIENT_ID and the value is your Client ID.
Click on deploy!

Features 🚀

Login Page

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

Create Playlist Page

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!

Recommendations Page

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!