Hello 👋 In this article, I would like to share the details of my project SupVision - a video library application.
Idea behind SupVision
I was a part of NeoGcamp's first cohort NeoGrad'21. NeoG Camp is a Bootcamp that helps an individual get started with web development and aims to be a full-stack developer in 4-6 months. During this cohort, I developed the following full-stack applications.
- SupMart - eCommerce application similar to Myntra
- SupVision - video library application similar to Youtube
- SupQuiz - multilevel quiz application in TypeScript + React
- SupSocial - social media application similar to Twitter.
- NoteSUP - notes taking application similar to Google Keep
- StyleSUP - component library application similar to Bootstrap
All of the above-mentioned apps have been hosted on Netlify. Netlify has always been my favorite platform to deploy web applications. One of the best features of Netlify that I like is the ability to create a deployed preview of an application. The automated CI/CD process makes it possible to provide various deployed versions of an application based on the different branches within the repository. This feature helped me immensely during the PR review sessions.
Today I would like to share the details about SupVision. This application contains a list of videos on jump rope tricks and tutorials to help a user improve their jump rope progress. Restricted the list of videos specific to this topic, helps a user to be focused, and not get distracted with other videos on varied topics. In this way, the user could be motivated to achieve their practice goals for the day or week.
How is it built?
This web application is completely responsive and has been developed in MERN stack. The technology stack used is as follows.
Frontend
- React using functional components and hooks. I have used useReducer + useContext to achieve the state management similar to Redux.
- React Player for video playback and controls
- React Router v6 for routing and page navigation
- Styling using my personal CSS component library StyleSUP
- Jest testing library for creating test cases.
Backend
- Node.js along with Express for RESTful APIs Github Repo
- MongoDB database along with mongoose as ORM for data storage
- Authentication using JWT (JSON Web Token)
Functionalities included in SupVision
The inspiration behind building this app comes from Youtube. I have tried to implement the features as close to how it is on Youtube.
Video Listing Page
- List of videos
- Search for videos
- Add to playlist
- Add to liked videos
- Filter based on channel
The home page consists of a list of all videos currently available on our database. There is an option to either search for a particular video by title using the search bar or select a channel using filters to view the list of videos from them only. There is an option to like the video or add it to the playlist too.
Playlist functionality
- Create a custom playlist
- Add video to the playlist
- Remove video from playlist
- Move video from one playlist to another
- Edit details of a custom playlist
- Delete custom playlist
This feature is available only to the registered users of SupVision. A successfully signed-in user would have watch later as their default playlist. They are free to add any number of custom playlists to their account. A single video could be added to multiple playlists. There is an option to move a video from one list to another. Individual videos could be removed from a playlist or the custom playlist could be deleted altogether along with the videos contained in them.
Liked videos functionality
- Add video to liked videos
- Remove video from liked videos
Move from liked videos to playlist
This feature is available only to the registered users of SupVision. A successfully signed-in user would be able to provide their appreciation by liking any video. The differentiation factor of this application against Youtube is that the
dislikefunctionality hasn't been added here. The reason for this is to maintain simplicity and provide a positive environment experience.
User Watch History
- Tracks all the videos while a user signed in
- Remove individual videos from history
- Clear complete watch history
This feature is available only to the registered users of SupVision. The watch history of a signed-in user would be recorded similar to how it works on Youtube. If the user is watching a video that is already present within their watch history, the list is updated in such a way that the last seen video is shown at the top. The user would have the liberty to remove a video or clear the entire watch history if required.
Video Page
- Video player along with video details
- Author information and subsequent filtering
- Feature to add/update personal notes for registered users.
On this page, the video is auto-played as the page loads. Details about the video such as the published date, number of views, and description are displayed. A signed-in user could like the video and add it to their playlist. They could jot down some personal notes against the video too. This data will be available when the user re-visits this video. For instance, If you are learning a new jump rope trick, you may want to note down the area of difficulty and refer to the same the next time you view this video tutorial.
Thank you for reading through this article. You can refer to the deployed version of this app on Netlify --> SupVision. I would love to know your feedback and suggestions, you could drop them in the comments section or DM me on Twitter. If this blog is interesting to you, I would appreciate it if you could give this post a like (with your favorite emoji 😁).
Peace ✌