Vue.js Vuetify Youtube Clone Project in Node.js Express and MongoDB in Javascript Full Tutorial For Beginners

You are currently viewing Vue.js Vuetify Youtube Clone Project in Node.js Express and MongoDB in Javascript Full Tutorial For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a youtube clone in vue.js vuetify ui as frontend and inside the backend we will be using node.js and express and mongodb. All the full source code of the application is shown below.

 

 

Technologies Used

 

 

Vue.js and Vuetify

 

Nodejs and Express

 

Mongodb

 

 

Get Started

 

 

In order to get started you need to download the frontend github repository source code

 

DOWNLOAD FRONTEND VUE.JS CODE

 

The link of the github repository is shown below

 

 

 

Now just download the full source code of the backend github repository of youtube clone

 

DOWNLOAD NODE EXPRESS SOURCE CODE

 

The screenshot of the backend repository is shown below

 

 

 

Features

  • Sign in / Sign Up to create channel
  • Video
    • Upload video
    • Upload video thumbnail
    • Watch video
    • Increase Views
    • Like and dislike video
    • Download video
    • Comment & reply for video
    • Update video details
    • Delete video
  • Subscribe to a channel
  • View liked videos
  • Trending
  • Subscriptions
  • History
    • Watch history
    • Search history
  • Settings
    • Modify channel name and email
    • Change password
    • Upload channel avatar

Project setup

Create .env.development.local for development then .env.production.local for production ready app. Then put in your api URL

VUE_APP_URL=http://localhost:3001

Install packages

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

 

 

Screenshots

 

 

Leave a Reply