Proj Vue Youtube Clone

MadrinanComLab

A YouTube clone created using Vue JS, Tailwind CSS and YouTube API!

Welcome to YouTube Clone using Vue JS!

Banner (2)

Link to Video Demo: https://youtu.be/OUh0-8NdVss
This project was initiated on January 21, 2023, and finished on April 11, 2023.

Technologies used in this Project:

Vue JS Tailwind CSS

Commands for this Application

Before you run this app, install the dependencies first, by running this command:

npm install

Command to run this app:

npm run serve

To watch changes in tailwind in case you are modifying it:

npx tailwindcss-cli build -i ./src/input.css -o ./dist/output.css --watch

Note: If you tried to modify the Tailwind and it didn't work, please try to restart the Vue server.

Setting up the YouTube API to your Local Repo

I've placed the API key in dotenv for security purposes, so in this part of README.md, I will guide you on how to setup your own key and gain access to the YouTube API.

Go to this YouTube API Guide: https://developers.google.com/youtube/v3/getting-started
As mentioned in the guide, you need to create your own Google Account and then go to Google Developers Console
Create your own project, just click the following button with red box below:
You can name it however you want, I named it "Vue YouTube Clone"
We need to enable the YouTube API so click the "Enable APIs and Services"
Then, look for "YouTube Data API v3"
Make sure you selected the project you've created earlier
Press the "enable" button of YouTube Data API v3
Next, we need the credentials for our app to gain permission to make requests.
Select the "Public data"
Copy the given string in "API key" (I blurred my API key)
Now, in your project's root directory, create a ".env" file and add the API key there:
Create the "api" folder inside the "src" folder, and then, inside the "api" folder, create "YouTubeAPI.js" and do the following:

You can do the following to test you YouTube API. Put this in mounted function of Vue:

  mounted(){
    const API_KEY = process.env.VUE_APP_API_KEY;
    let max_results_length = 16
    let url = `https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=${ max_results_length }&key=${ API_KEY }`;
    YouTubeAPI.get(url)
        .then(response => {
            console.log(response);
        })
        .catch(err => {
            console.log(err);
        });
}

Vuex (Vue's State Management Library)

This application uses Vuex to handle the data shared through all of the components. Madriñan Computer Laboratory conducted an experiment to better understand this before implementing it here. You can access the repository of the experiment, just click this link.