https://github.com/p0u4a/playlist-generator

Create personalised YouTube music playlists with ease.
https://github.com/p0u4a/playlist-generator

music nextauth nextjs react-bootstrap youtube-api-v3

Last synced: 9 days ago
JSON representation

Create personalised YouTube music playlists with ease.

• Host: GitHub
• URL: https://github.com/p0u4a/playlist-generator
• Owner: P0u4a
• Created: 2022-07-03T06:00:40.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-28T07:28:28.000Z (about 2 years ago)
• Last Synced: 2023-03-11T08:13:29.837Z (almost 2 years ago)
• Topics: music, nextauth, nextjs, react-bootstrap, youtube-api-v3
• Language: JavaScript
• Homepage: https://playlist-generator-p0u4a.vercel.app
• Size: 4.53 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Music Playlist Generator 🎶

Automatically create music playlists on your youtube account.

Simply enter the artist, band, or genre you would like your playlist to be based on, and use the slider to set the playlist's length. 



This project was built with Nextjs, Youtube data api v3, Nextauth for authentication and react-bootstrap for the UI. 

Demo: https://playlist-generator-p0u4a.vercel.app

# How to run locally

## Installation

Clone the repository with ```git clone https://github.com/P0u4a/youtube-music-playlist-wizard.git``` 

Run ```npm install``` to install dependencies

## Oauth Credentials

Go to https://console.cloud.google.com/getting-started and enable

the Youtube data api v3

Configure your Oauth consent screen, making sure to set the scope

to ```https://www.googleapis.com/auth/youtube.force-ssl```

Under the credentials tab, click new credentials and choose **new

Oauth client ID**. Choose web app as the application type and set the

**Authorised Javascript Origins** to ```http://localhost:3000```

(assuming you are hosting on port 3000, otherwise set your own port).

Then, set the **Authorised redirect URI** to ```http://localhost:3000/api/auth/callback/google```.

## Enviornment Variables

Inside the app's root directory, create a ```.env``` file and add the following variables:

 * ```CLIENT_ID```

 * ```CLIENT_SECRET```

 * ```NEXTAUTH_SECRET```

Set ```CLIENT_ID``` and ```CLIENT_SECRET``` to the values generated when you created your

Oauth credentials. Lastly, you should set ```NEXTAUTH_SECRET``` to a randomly generated value as it 

is used to encyrpt the JSON web tokens generated during the Oauth flow.

## Running the app

Run ```npm run dev``` in the terminal and make the magic happen.