MeTube is a Youtube clone and video database used for searching for, watching, saving, and uploading videos. It allows for user authentication and login, display of recently watched and trending videos, and interaction with other users through likes and comments.
- Users can upload videos if logged in. Those videos will be available universally as well as on the user's profile
- Users can play videos anywhere on the site whether or not they are logged in
- Users can like or dislike videos
- Users can comment on videos
- Users can like or dislike comments on videos.
- Users can search for videos
- Videos will display their number of plays.
MeTube is built with the MERN Stack (MongoDB, Express, React, and NodeJS).
MongoDB is a database program that we will use to store any data created using our application (e.g. videos, users, likes, comments). Schemas created within MongoDB are used to outline the attributes that each one of our models will have as well as the data type and any validations on each attribute.
Takes care of how an applications endpoints respond to client requests
React is a Javascript library that we will use to build user interfaces. Components built using React will render the display information that we want on the page (which will then be styled using HTML/CSS), and they will also contain the framework needed to carry out any user interaction functionality.
We use Node.js in development in order to test code and install dependencies by running command-line prompts.
- Express (the main framework)
- Mongoose (to connect and interact with MongoDB)
- Passport (for authentication)
- Passport-jwt (for JSON web tokens)
- Jsonwebtoken (to generate the tokens)
- Body-parser (to parse data from requests)
- Bcryptjs (Bcrypting password)
- Validator (for database validations)
Upon clicking on a video, the user will be directed to that video's display page. There, the video will be displayed on an enlarged scale and is able to be played on-click. The video is able to be liked and commented upon, and the user can also like and dislike comments. Additionally, other videos are shown on the side, and clicking on one of those videos will take the user to that video's display page.
Upon rendering a video's display page, the likes specifically tied to that video and the comments of that video will be fetched. This prevents each display page from having to receive data from all of the likes on the database. Below is shown the Express route for fetching likes.
router.get('/likes/videos/:video_id', (req, res) => {
Like.find({likeableType: 'video', likeableId: req.params.video_id})
.then(likes => res.json(likes))
.catch(error => res.status(404).json({ noLikes: 'No likes found with that video id' }))
});
Since both videos and comments can be liked, the GET route needs to accept both the type of entity being liked (video or comment) as well as that entity's ID. Similarly, comments will be fetched only for the video associated with the current video display page.
Users can only like and comment on a video if logged in; otherwise, error messages will be rendered instructing the user to log in. Additionally, the user cannot like or dislike the same video or comment more than once. Pressing like will cause the thumbs-up icon to turn blue while pressing dislike will cause the thumbs-down icon to turn red (as seen in the image above). Pressing either a second time will delete that like or dislike, and the icon will turn gray again.
Users also have the ability to upload their own videos if logged in. Uploaded videos will be added to the entire index of videos and render on the landing page. They will also be rendered on the profile of the user that uploaded the video.
Clicking on the video icon on the right side of the navbar will cause the modal seen above to pop up. Videos can be uploaded from any page on the site. Uploading videos is handled by updating state in the specified container:
this.state = {
title: "",
user_id: this.props.currentUser.id,
video: "",
uploadText: "Click to Select File",
uploadButtonClass: 'submit',
uniqueId: 1
};
By updating the title, user_id, video, and uniqueId slices of state, information on the video to be created can be parsed into an object and passed to the corresponding action. Updating the uploadText and uploadButtonClass slices of state allows the modal to be interactive, and text elements of the modal will change depending on the upload state of the video.
- User authentication
- User profiles
- List of liked videos for each user
- Subscriptions to other users
- Refactored search bar
- Continuous video playback during site navigation