/NoobTube

Primary LanguageJavaScript

NoobTube

Live Link

Background and Overview.

Welcome to NoobTube, a YouTube clone with a twist. Powered by the Mern stack, this app provides users with an interactive user experience centered around enjoying quick-scope videos.

This project was designed and built in under 1 week.

Technologies

  • Javascript
  • MongoDB
  • React
  • Express
  • Node.js

Features

  • User Authentication using BCrypt
  • Video Index
  • Video Show Page
  • User Profile Page

Video Index

  1. The video index pulls up a list of linked videos along with the video's thumbnail, title, and author.
  2. From this index, the user can navigate to the individual video show page.
  3. The thumbnail image is derived from a string manipulation of the YouTube videos url. Below is code snippet that demonstrates how the NoobTube thumbnail is derived.

Video Show

  1. Main Feature: Embedded Video
  2. In addition to the embedded video, the video show page has both a like and comment section. The likes to dislikes ratio is reflected in a bar below the video. The comment section is below the like section.
  3. On the right side of the page, there's a shorter index of videos that the user can use to navigate to other videos.

User Profile

  1. The user profile is essentially a re-creation of the video index, except only the user's videos appear on the page.
  2. Each user has a profile page that can be viewed by other users.