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

Sign Up (/signup) #

Home Page (/) #

Trending Page (/trending) #

Subscriptions Page (/subscriptions) #

History (Watch) Page (/history) #

History (Search) Page (/history) #

Liked Videos Page (/liked-videos) #

Search Page (/search) #

Watch Page (/watch/:videoId) #

Comment & Reply (/watch/:videoId) #

Channel Page (/channels/:channelId) #

Dashboard Page (/studio) #

Subscribers Modal (/studio) #

Upload Video Modal #

Upload Video Detail Modal #

Videos Page (/studio/videos) #

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

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

Delete Video Modal (/studio/videos) #

Settings Modal #

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