This is a basic responsive video streaming website made with NextJS, Tailwind CSS, and MongoDB.
- watching videos
- ratings
- basic analytics
- uploading and removing videos
- tags
- auto re-render searching
- manual searching
- User Roles:
- Viewer Role -- Can only view videos
- Content Editor Role -- Can upload and remove videos
- Content Manager Role -- Can view the analytics of videos
- Login and Signup
- and more...
The home page lazy-loads all of the videos from the DB as you scroll, pulling the thumbnails from a Google Cloud Storage Bucket. User's can use the search bar to search for videos; the list of videos updates as they type.
If a user clicks the profile icon in the top right, they will have the option to Sign In, this will bring down the login form. Clicking anywhere outside of the login form will make it go away.
User's must be logged in to view videos. When an unauthenticated user clicks on a video, they are prompted to login by a form covering the page. Note, the blurred out page just not actually contain the video, just the thumbnail, so removing the form through inspect element will not allow them to view the video.
User's are able to watch the video, and are able to see the title and description. They also have a 5-star rating option. Each user can rate the video which changes the 5 star rating on the display on the homepage, as well as in the rating portion of the content manager's dashboard. If a user rates a video more than once, only their latest rating will be counted.
User's with the content_editor role are able to upload and delete videos. They have this dashboard where they are able to see a list of all videos, and are able to delete them. They also have a form that can be used to upload new videos. The videos and thumbnails are uploaded to a Google Cloud Storage Bucket.
User's with the content_manager role are able to view the analytics for all of the videos. Currently, views and average rating are the available analytics.
https://docs.google.com/document/d/1B8ghIj61_sw1IGzUquypRFdxqRF6PYol-0i7VQYMHKM/edit