MERN Stack Course: Build a Video Sharing Web App with AWS

Name: MERN Stack Course: Build a Video Sharing Web App with AWS
Rating: 4.7 (15 reviews)

Master MERN Stack, AWS, and TypeScript to Create a Video Sharing MERN App with Download, Video Sharing and Auth Features

Created byVapa Academy

Last updated 10/2024

English

What you'll learn

How to Build a Full-Stack Video Sharing Web App Using the MERN Stack (MongoDB, Express, React, Node JS).
Use TypeScript for Both Frontend and Backend Development, Ensuring Type Safety and Maintainable Code.
Implement Secure User Authentication Using JWT (JSON Web Token).
Create a Fully Responsive UI Using Tailwind CSS, Ensuring the App Looks Great on All Devices.
Handle File Uploads and Manage Storage Efficiently with AWS S3 for Video and Image Content.
Set Up Video Download and Sharing Functionality Within the Web Application.
Manage CRUD Operations (Create, Read, Update, Delete) for Videos and User Profiles.
Implement Search Functionality to Find and Play Specific Videos From the App.
Add Privacy Controls to Video Posts, Allowing Users to Choose Between Public and Private Settings.
Set Up Password Recovery and Reset Mechanisms Using Email.
Allow Users to Update Their Profile Information, Such as Name and Email.
Use Multer for Handling File Uploads in Node JS Applications.
Structure a Scalable and Maintainable Backend Using Express and MongoDB.
Learn Best Practices for Deploying Full-Stack Web Apps to Vercel.
Gain Hands-On Experience with Real-World Development Practices, Including Using AWS Services for Cloud Storage and Video Management.

Course content

1 section • 136 lectures • 13h 4m total length

Video Sharing Web App Project - Source Code0:05
Video Sharing Web App Project - Live Demo8:22
Downloading Node Part - 12:33
Setting Up The Vite Ts Part - 22:54
Installing Tailwind Css Part - 31:44
Configuring and Checking Tailwind Css Part - 42:57
Configuring Ts in Back-end With Ts Part - 54:54
Setting Up Back-end Server Part - 63:26
Setting Up The GitHub Part - 74:06
MongoDB Atlas Setup in Browser Part - 84:06
Connecting DB With Mongoose Part - 95:55
Improvident DB Connectivity and Port Part - 102:35
Defining Our First Schema Part - 116:45
Starting Our Sign Up Controller Part - 125:21
Understanding and Sending Response Part - 135:10
Understanding Routing in The Back-end Part - 145:36
Checking Our API Using Postman Part - 156:07
Saving Password Securely in DB Part - 167:07
Finally Completing Our Sign Up Controller Part - 172:16
Starting The Sign in Controller Part - 189:17
Setting Up The Passport JWT Strategy Part - 196:33
Completing The Sign in Controller Part - 208:14
Understand The JWT Authentication Part - 213:18
Creating Layout Part - 228:15
React Icons and Completing Layout Part - 233:30
Creating Sign Up Page Part - 249:04
Creating Sign in Page Part - 256:34
Capturing Email and Password From Sign Up Form Part - 265:56
Understanding The Form Data and useState Part - 274:50
Setting Up Cors Part - 286:37
Setting Up Redux Store Part - 298:14
Configuring Store Part - 303:50
Hitting Back-end API From Front-end Part - 316:32
Signing Up The User From Front-end Part - 323:04
Implementing Notification Part - 333:57
Sign in The User Part - 344:15
Setting Up The Token in Local Storage Part - 357:21
Completing Sign in Part - 365:50
Revisit Store Part - 374:24
Back-end API for Getting User Details Part - 389:38
Understanding Authorized Route in Back-end Part - 395:34
Making Sidebar Part - 4010:24
Making User Profile Part - 4112:09
Completing The Side Bar and Profile Part - 424:41
Setting The User Details Part - 439:31
Implementing Protected Route in Front-end Part - 447:04
Completing User Profile of User Part - 454:08
Log Out User Part - 465:23
Fixing The Bug in User Profile Part - 471:55
Back-end API for Updating User Part - 486:25
Integrating The Back-end API for Updating User in Front-end Part - 494:47
Updating User in Local State Part - 504:12
Defining Custom Hook for Sending Auth Token Part - 513:30
Configuring Node-mailer Part - 525:36
Sending Static Mail Part - 532:53
Creating Transporter to Send Email Part - 545:51
Designing Our First ejs Page Part - 557:37
Configuring ejs Part - 563:35
Understanding The Flow of Update Password Part - 572:06
Complete The Back-end API to Update Password Part - 585:50
Solving The Bug of The Updating Password Part - 591:42
Design The Reset Password Page Part - 608:31
Integrating The Back-end to Send Reset Password Email Part - 615:53
Completing The Reset Password Front-end Part - 622:05
Integrating The Logic for Updating The Password From Back-end Part - 635:44
Completing The Updating of Password Part - 645:20
Setting Up AWS Credentials Part - 656:54
Configuring AWS Client in Back-end Part - 665:42
Multer Middle-ware to Directly Upload in AWS Bucket Part - 676:12
Defining Video Schema Part - 685:19
Defining Type of Video Schema Part - 693:49
Understanding The Working of Uploading Part - 709:29
Completing Uploading Video Controller Part - 716:13
Testing API for The Uploading of Video Part - 726:00
Configuring APIs for The Uploading of Video Part - 733:12
Completing Upload Video API in The Back-end Part - 743:14
Fixing The Bucket Policy Part - 756:34
Designing Upload Page Part - 768:52
Completing The Upload Page Part - 778:06
Designing Our First Text Editor Part - 783:04
Capturing The Data From The Front-end Part - 799:37
Creating Url for Thumbnail and Files Uploaded Part - 805:13
Understanding How to Send Files to The Back-end Part - 814:40
Sending The Files and Other Details to The Back-end Part - 825:02
Testing of Uploading The Video From Front-end Part - 834:27
Back-end API For Fetching Latest Videos Part - 845:22
Back-end API for Fetching Single Video Part - 854:57
Back-end API for Deleting The Single Video Part - 864:43
Back-end API for Downloading Video Part - 878:28
Understanding How Downloads Worked Part - 882:36
Back-end API for Updating Video Details Part - 898:17
Testing Back-end API for Updating The Video Part - 906:58
Revisit Git Part - 911:12
Defining Types of Video in The Video Reducer Part - 928:18
Integrating The Back-end API for The Public Videos Part - 937:49
Selecting The Public Video Part - 943:47
Designing Hero Video Card Part - 959:14
Understanding React Player Part - 967:36
Designing The Share and Other Icons Part - 979:32
Formatting The Video Duration Part - 984:59
Designing The All Videos Page Part - 998:42
Designing The Home Video Page Part - 1009:29
Completing The Home Video Section Part - 1015:58
Understanding The Slider Part - 1028:46
Fixing The Design Bug Part - 1032:31
Integrating The Back-end API for Downloading The Video Part - 1047:35
Integrating The Download Functionality to The Front-end Part - 1053:16
Designing The Single Video Page Part - 1068:58
Completing The Single Video Page Part - 1078:34
Showing Data on Single Video Page Part - 1087:57
Adding Loader on Single Video Page Part - 1092:50
Back-end API To Fetch Videos Uploaded by Logged in Users Part - 1108:45
Back-end API to Fetch Videos for Logged in User to The Front-end Part - 1116:12
Understanding Update of Video Part - 1126:01
Styling Active Link Part - 1136:18
Integrating The Delete of Video to The Front-end Part - 1148:46
Completing Deleting of Video Part - 1152:50
Designing The Update Video Page Part - 1162:15
Pre Populating The Data for The Update Video Page Part - 1178:02
Integrating The Back-end API for Update of the Video to The Front-end Part - 1188:39
Understanding The Update Functionality Part - 1196:23
Completing All The Video Pages Part - 1203:05
Implementing Searching of Videos Part - 1217:03
Integrating The Search With UI Part - 1227:48
Displaying Search Results Part - 1233:05
Designing a Custom Loader Part - 1242:36
Design User Dashboard Page Part - 1258:26
Displaying User Info Part - 1268:58
Showing User Upload and Download Count Part - 1274:57
Toggling Between Sign in and Dashboard Page Part - 1284:37
Implementing Skeleton Loading and Loader Part - 1299:02
Deploying Front-end Part - 1304:58
Configuring The Vercel.json for Front-end and Back-end Part - 1315:23
Understanding The Restriction on .env Variables by Vercel Part - 1325:13
Deploying Back-end Part - 1335:54
Solving The Cors Error and Testing Part - 1345:42

Requirements

Students Don't Need To Have Any Prior Knowledge To Take This Course; They Will Learn Everything From It.

Description

In this comprehensive MERN Stack course, you’ll learn how to build a fully functional video-sharing web application from scratch, integrating cutting-edge technologies such as AWS, TypeScript, Tailwind CSS, and more. Whether you are a beginner or an intermediate developer, this course will guide you through the entire process of creating a full-stack web app that enables users to upload, share, and download videos. You’ll master the MERN stack (MongoDB, Express, React, Node.js) while diving into essential features like authentication, video streaming, and secure file uploads.

Throughout the course, you will work on a hands-on project: a fully responsive video-sharing platform where users can sign up, upload their videos, manage their profiles, and control privacy settings. You'll learn how to leverage AWS for video and image storage, making your app scalable and secure. Additionally, you’ll explore how to implement essential CRUD operations, manage authentication with JWT (JSON Web Token), and offer features like password recovery, search functionality, and user profile updates.

This course emphasizes building real-world skills through practical experience, and by the end of the project, you’ll have a deployable web app that demonstrates your expertise in modern web development. You’ll also learn how to deploy your app to Vercel, ensuring your project is live and ready to share with the world.

Video Sharing Web App Project:

Users can sign up, sign in, and manage their profiles, including updating their name and email.
Video uploads to AWS with Multer, allowing for scalable and secure file storage.
Video download and share features, enabling users to download videos or share video links.
Privacy settings for public or private video posts.
Full CRUD operations for managing user-generated content.
Password recovery and reset options via email.
JWT-based authentication for secure access to the platform.
Video search functionality allowing users to find and play videos.
Fully responsive design using Tailwind CSS for optimal display on any device.
Deployment to Vercel for hosting your web application.

By the end of this course, you'll have gained all the skills you need to build and deploy a full-fledged video-sharing web app using the MERN stack and AWS, and you’ll be confident in applying these skills to future projects.

Who this course is for:

Beginner And Intermediate Developers Looking To Master The MERN Stack.
Developers Interested In Building Full-Stack Web Applications.
Anyone Wanting To Learn How To Implement Secure User Authentication With JWT.
Students Looking To Gain Hands-On Experience With Type-Safe Development Using TypeScript.
Aspiring Web Developers Who Want To Build A Real-World Video Sharing Platform.
Developers Interested In Learning How To Work With AWS S3 For File Storage And Management.
Frontend Developers Looking To Expand Into Full-Stack Development.
Developers Wanting To Implement Video Streaming, Uploading, And Sharing Features.
Students Who Want To Learn How To Deploy Full-Stack Web Apps To Vercel.
Anyone Interested In Learning Tailwind CSS To Create Modern, Responsive User Interfaces.