/vue-nodejs-youtube-clone

This is the frontend (VueJS) of the Youtube clone called VueTube.

Primary LanguageVue

VueTube Vue Frontend - YouTube Clone

This is the frontend (VueJS) of the VueTube clone

API

Backend RESTFUL API Repository API

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

Customize configuration

See Configuration Reference.

Screenshots

Delete the screenshot folder if you download this code (Screenshots folder is 3.14mb in size).

Sign In (/signin)

Screenshot

Sign Up (/signup)

Screenshot

Home Page (/)

Screenshot

Trending Page (/trending)

Screenshot

Subscriptions Page (/subscriptions)

Screenshot

History (Watch) Page (/history)

Screenshot

History (Search) Page (/history)

Screenshot

Liked Videos Page (/liked-videos)

Screenshot

Search Page (/search)

Screenshot

Watch Page (/watch/:videoId)

Screenshot

Comment & Reply (/watch/:videoId)

Screenshot

Channel Page (/channels/:channelId)

Screenshot

Dashboard Page (/studio)

Screenshot

Subscribers Modal (/studio)

Screenshot

Upload Video Modal

Screenshot

Upload Video Detail Modal

Screenshot

Videos Page (/studio/videos)

Screenshot

Edit Video Details (/studio/details/:videoId)

Screenshot

Upload Thumbnail Modal (/studio/details/:videoId)

Screenshot

Delete Video Modal (/studio/videos)

Screenshot

Settings Modal

Screenshot

If you like the UI, I developed it in a seperate repo VueTube

License

This project is licensed under the MIT License

Developed by Reagan Ekhameye (Tech Reagan)

Reach me on twitter @techreagan