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

Explore building a complete video sharing web app with the MERN stack and AWS, covering S3 storage, Redux state management, React Router navigation, user authentication, and video upload and playback.

Install node.js and npm, download and configure VS Code, and verify installations with node --version and npm --version to prepare the development environment for the MERN stack app.

Set up the frontend by creating a vite ts project with react and typescript, install dependencies, and run the dev server to view localhost.

Install tailwind css along with postcss and autoprefixer as development dependencies, generate postcss.config.js and tailwind.config.js, and start configuring a color theme for the website.

Test and configure Tailwind in a React app by updating index.html, applying Tailwind through src and index.css, and verifying via a hello world render, including Tailwind config setup.

Configure the backend with TypeScript by creating a backend folder, installing TypeScript, and generating tsconfig.json with strict, commonjs, ES2016, and dist output.

Set up a back-end server for a MERN video sharing app by installing express and @types/express, creating src/index.ts, and running with ts-node-dev on port 8000.

Push your completed backend and frontend configurations to GitHub, create a repository, set up .gitignore to exclude node_modules and .env, initialize git, stage and commit changes, and push to master.

Configure a MongoDB Atlas cluster in the browser for a 'my video hub' project on AWS. Add network access, either by IP or allowing anywhere, to enable connections.

Connect db with mongoose by loading the Mongo URI from a .env file using dotenv, export a connect db function, and call it from index.ts to verify db runs.

Configure the dot env port to 8000 for database access, load it via dotenv in index.ts, fall back to 8080, and push the changes to GitHub.

Create a mongoose user schema in the model folder following mvc, specifying name, email (required and unique), password, token, upload and download counts (default 0), with timestamps.

Implement the sign up user flow in the auth controller by validating email and password, checking for existing users, creating a new user, and returning responses.

Create a reusable send response utility in src/utils/sendResponse.ts for Express controllers, handling status, success, message, and data with a response data interface and standard http status codes.

Learn to set up a scalable backend routing structure in a MERN app, including typing register requests and organizing versioned routes from index to sign up endpoints.

Test backend APIs with Postman by configuring a video hub folder structure, creating an auth signup request, and verifying user creation in MongoDB after enabling express.json.

Implement secure authentication by generating a 16-byte hex token with the crypto library and hashing passwords with bcrypt via a password helper, then store hashed passwords in MongoDB.

Complete the sign up api: validate email uniqueness, hash password with crypt, generate token via crypto, and return success or error in the auth route.

Sign in with jwt using passport and passport-jwt in a stateless MERN workflow. Configure secret in env vars, extract bearer token, and initialize passport in index.ts.

Set up a passport jwt strategy, verify user existence, and generate a json web token with a one-day expiry using an env secret for secure authentication.

Complete the sign in controller by validating user credentials with a hashed password check, generating a JWT token, and returning success or error responses for the MERN video sharing app.

Learn how jwt authentication flows from api version one to sign in, verifying passwords with bcrypt, and generating a jwt token for front-end use.

Integrate the backend API with the frontend to visualize the design. Create a reusable layout with header, footer, and dynamic content via children, using React and tailwind CSS.

Create a main component that renders children with a flex column layout, centered items, full width, and a top margin; add a footer with social anchors and install react-icons.

Build a centered sign up form with email and password fields, a sign up button, and join us today header, styled with tailwind and wired for react router dom.

Leverage react-router-dom to configure routing for sign up, sign in, home, and all videos pages in a MERN video sharing app, enabling seamless navigation without page refresh.

Capture sign-up data with useState, type definitions, and onChange for email and password; prevent default submit and prepare backend submission with future redux store integration.

Learn to manage sign in form state with useState by creating auth form data for email and password, preventing default submission, and handling changes and submit events with TypeScript.

set up cors between frontend port 5173 and backend port 8000, configure origins, and use axios with a base URL to post signup data to the backend.

Configure the Redux Toolkit store using Redux Toolkit, define auth state with user, loading, and token, create an auth slice, and connect selectors for centralized state management.

Configure the redux store with configureStore and the auth reducer in store.ts. Define route state and app dispatch types, and wrap app with the React Redux provider to share state.

Send an asynchronous signup request from front end to back end using redux toolkit createAsyncThunk, with a typed payload and error handling.

Dispatch the sign-up action from front end, sending the url, payload, and configuration to back end via axios, and handle success or user exists errors on the sign-up page.

Implement a front-end signup flow with toast notifications showing signup success or warnings, using a toaster container with top right positioning in the MERN video sharing app with AWS.

Create a sync thunk for sign in that posts to the backend auth/sign in endpoint, uses a try/catch with toast feedback, and stores data.user.token in local storage.

Set up token handling and local login state by wiring the sign-in async action to update the logged-in user, manage loading, and handle pending, fulfilled, and rejected cases.

Learn how to implement sign in in a MERN app by returning and storing a jwt token in local storage, enabling authorization and subsequent actions.

Revisit authentication in MERN stack by implementing an auth reducer with create async thunk and JWT tokens; integrate backend API, sign in and sign up flows, UI, and git workflow.

Implement a JWT-protected endpoint to fetch authenticated user details, validating the user from the JWT payload and returning non-password data for the MERN stack video sharing app.

Implement and test an authenticated route in the back-end by introducing a dedicated authenticated request handler, wiring JWT-based passport authentication, and securing the user profile endpoint.

Build a toggleable left sidebar for a MERN video app, implement navigation and user profile UI, and manage state, routing, and data fetching in React.

Implement a mobile top nav and fixed sidebar, then build a centered user profile with an editable name and email form controlled by React state.

Toggle edit state to show save or edit, pre-populate user name and email in the profile, and fix sidebar visibility and routing in the MERN video sharing app.

Demonstrates fetching user details in a MERN app by using an auth reducer thunk, reading token from local storage, and calling backend profile API with a bearer token.

Guard front-end routes with protected routing by checking a local storage token and redirecting unauthenticated users to sign in, while routing authenticated users to their profile.

Implement automatic redirection to the user profile after sign-in by wiring navigation with react-router, handle loading states, and refine the sign-in flow for a responsive MERN app.

Implement logout in the MERN video sharing web app by updating the auth reducer to remove the token from local storage via dispatch and navigate to the sign-in page.

Fixing the bug in user profile revisits authentication and authorization, token storage, and sending authenticated requests. It covers updating frontend with user details and logout redirects.

Implement and test the back-end update user API with authentication, validate name and email, handle errors (including internal server error), and return appropriate statuses.

Toggle the edit state on click, submit updated user data to the backend via post to /api/v1/user/update using a token header, and display success or error messages.

Update user details in local state without calling an API by implementing an update user function in the auth reducer, dispatching updates for name and email, and validate changes persist.

Create and export a custom hook for config with jwt to send auth tokens and update user details in real time within the mern stack video sharing app on aws.

Install nodemailer and configure a Gmail smtp transport to enable sending signup emails. Load email and password from a .env file (process.env) and use a Google app password for authentication.

Create a reset password mail function in the mailer using a transporter to send mail via Gmail to the user email with a reset password subject and html content.

Demonstrates how to implement the reset password email function in the auth controller using ES6 exports, validate input, fetch the user, send the reset email, and test with Postman.

Install ejs and create a reset password email template using reset_email.ejs with inline CSS, a token variable, and a front-end reset link in an MVC view.

Configure ejs to render a reset password email by importing ejs, joining the view path, and passing a token variable, then test sending from the backend.

Understand the password reset flow in the MERN video sharing app: from backend reset email and token to front-end validation and updating the user password.

Implement the update password back-end API by using the token from request params to identify the user, hash the new password, save changes, and return a success response.

Fix the password update flow by generating a new security token after hashing the password, using crypto random bytes to prevent multiple updates in the backend.

Builds the reset password page in the frontend using a React FC with an email input, useState, and form submission, then navigates to sign in after sending the reset email.

Integrate the front end with the back end API to send the reset password email in a MERN stack app, using async post calls with try/catch finally and loading state.

Develop and test the reset password front-end by implementing routing in router.tsx, wiring the reset password email flow, and previewing the page in local dev.

Learn to implement the reset and update password flow in a MERN app by extracting the token from the URL and posting the new password to the backend.

Implement and link the update password flow, test reset vs update password routes, debug backend routes, and verify login after password update while integrating front-end and back-end APIs.

Create an IAM user and generate access keys, then configure environment variables for AWS access. Create and configure an S3 bucket, set the region, and prepare for video uploads.

Configure the backend to upload files to an AWS S3 bucket by installing multer and Multer S3, creating an S3 client with region and credentials from environment variables.

Configure a multer middleware to upload videos and thumbnails directly to an s3 bucket for a MERN video sharing app, with auto content type, metadata, two fields, and unique naming.

Define a video schema in TypeScript for the MERN stack app, including title, description, S3 path, uploaded by user reference, privacy, thumbnail, and timestamps, then export the video model.

Define a video schema for the mern stack course using mongoose, including title, description, path, s3 key, url, privacy, thumbnail, and createdat/updatedat timestamps.

Learn to implement the AWS file controller and route in a MERN stack app, configure Multer S3 middleware, handle video and thumbnail uploads, and enforce authenticated access.

Complete the uploading video controller by saving video details to the database, validating user and video file data, and returning a success payload with video path, title, description, and thumbnail.

Test the upload api for videos using postman, generate and use a bearer token, and troubleshoot s3 permission errors while uploading a file to aws bucket.

Configure APIs to enable video uploading by granting S3 permissions, test with postman, and ensure backend defaults for title and description in the MERN video sharing app.

Complete the upload video API in the back-end by fixing description handling in the AWS file controller and validating video and thumbnail uploads.

Implement backend uploads to S3, create video and thumbnail keys, fix the bucket policy for public access, and validate uploads through the controller.

Design and implement the frontend upload page for a video sharing app, adding video and thumbnail inputs, a public/private dropdown, and a live preview.

Develop the upload page for a video sharing MERN app by implementing title and optional description, privacy dropdown, and submit button, then link the route in router.tsx.

Install and integrate React Quill to build a description editor, apply full width, padding, border gray 300, rounded md, and on focus outline none with ring blue 600.

Capture inputs for video upload page using React useRef and state for video src, thumbnail, title, and description with React Quill. Implement change handlers to generate object URLs for previews.

Wire change handlers for title, description, and privacy on input and select controls, implement a submit handler with prevent default, and plan to store the description paragraph in database next.

Send captured title, description, and media to the back end using form data. Append title, description, video, and thumbnail, and manage loading and errors with a try-catch flow.

Learn to send frontend data to the backend with a post request, using form data and JWT-authenticated headers to upload video and thumbnail to AWS S3.

Implement a loading state for video uploads and reset the form after success, setting title and description blank, privacy false, and video src and thumbnail null, with backend api integration.

Develop and expose a back-end API to fetch public videos, populate uploader email, and return sorted results, using a MERN stack with AWS integration.

Develop a back-end API to fetch a single video by id, with error handling and populated uploader email, returning 200 with the video or 500 on failure.

Implement a delete video API by id in the back end, handling errors and returning clear success or not found responses, with bearer token authorization.

Implement a download video API that extracts the id, fetches the video by id, and streams it from AWS S3 to the client with content-disposition and content-type headers.

Pass the user id in the request to increment a logged in user's download count, then save the user; the lecture covers video API operations.

Implement a back-end api to update video details - title, description, video file, thumbnail, and privacy - using id lookup, object.assign, and save with robust error handling.

Update the video through the back-end API by locating it, updating title, description, privacy, and optional video and thumbnail files, and validate changes with Postman in the AWS context.

Update the video update flow in the backend, handle thumbnail and new video file cases with middleware. Then commit and push changes while preparing frontend visualization.

Define video types and video state in the frontend reducer to interact with backend video APIs, enabling CRUD operations, file updates, and JWT-based axios configuration.

Implement a fetch public videos flow by defining an async thunk, using jwt config, calling the backend API to retrieve an array of videos, and handling errors with toast messages.

Implement a public videos fetch workflow in a MERN app by building a video slice with create slice, reducers, and extra reducers, handling pending, fulfilled, and rejected states.

Design a hero video card for a MERN stack video sharing app with hover-enabled thumbnail, offering download, share, and open actions, plus title, description, and duration.

Learn to integrate the react-player package to handle video playback in a MERN stack app, including installation, thumbnail setup, hover-activated overlay for share and download, and play/pause controls.

Implement share and open-in-new-tab icons for the video player by adding a link tag with React Router Dom, external styling, and a copy-to-clipboard function that shows a toast when copied.

Format the video duration on the hero video card, display it only when greater than zero, using a format duration function for minutes and seconds with a time icon.

Design the all videos page by fetching public videos and mapping them to hero video cards in a responsive grid, with routing and state management.

Design a two-section home page with a hero video card and a recently added videos area, using public videos, loading and playing states, and a watch now and play button.

Continue building the home page by adding a react player and a watch now button with tailwind styling, a transition, and center the hero card while setting isPlaying on click.

Build a responsive video slider in a MERN stack app with React Slick, covering setup, slider settings, responsive breakpoints, and integration with the home page.

Fix the design bug by integrating the react slick video slider, copying required css files, and updating app.tsx and home.tsx to render the video slider on the home page.

Implements video download by hitting the back-end API through the video reducer's async thunk, using video id and user id in query params, handling blob response for download.

Develop the front-end download workflow for a video in a MERN stack video sharing app, including loading state, token verification, dispatching the download with video id, and error handling.

Design the single video page by fetching the video by id and managing loading and downloading states. Implement a blob-based download with an anchor click and feedback via toasts.

Designs the single video page for a MERN stack video sharing app, implementing loading state, an overlay with video title and description, and play and download buttons with styling.

Show how to render a single video page by conditionally displaying a React player when a video exists, with an overlay, a top-right download button, and AWS-based single video retrieval.

Finish the single video page with a download button, verify sharing and navigation, and plan backend search API and dashboard UI integration for the MERN video sharing app.

Set up a back-end API to fetch videos uploaded by the logged-in user using AWS, validating user identity with JWT and returning the user's video data.

Integrate the back-end API for fetching videos of the logged-in user into the front end using a redux async thunk, with jwt config and loading state management in extra reducers.

Build the user video gallery in a MERN app by creating the my videos component, fetching user videos with redux dispatch and jwt config, and guarding the route.

Rewrite the my videos page from scratch, implement a flex layout with a left sidebar and main content, and style the active link.

Implement delete video functionality on the front end by wiring a delete video action, updating the reducer state, and handling backend delete via jwt-authenticated requests.

Implement delete video flow by calling delete video with the correct id and jwt-config, update local state via the video reducer, and commit changes; next session covers editing videos.

This lecture fixes the thumbnail display by correcting capitalization, guides designing the update video page, and shows a pre-populated edit form with notes on future full video updates.

Learn how to pre-populate the update video page using a central redux toolkit state, dispatch an edit video action, and navigate to the edit route with the selected video data.

Implement the core update functionality by building an asynchronous update video thunk and sending a jwt-authenticated multipart form data put request with video, thumbnail, title, and description.

Learn how to implement the update video functionality by rewriting the submit handler, building form data for file and thumbnail, and dispatching an update video action with JWT config.

Edit video details on the my videos page, update comments and bold descriptions, then save. Integrate the back end API to update videos and push changes.

Implement search functionality for videos by combining public and user videos, then filter results by title and description using a thunk-based API call and a search bar.

Learn to connect a search bar to the MERN video app, combining public and user videos, and dispatch get search results when the query term changes.

Display search results by conditionally rendering a responsive grid of hero video cards from the search results array when a search term exists, using video.id as the key.

Design a reusable React loader component with a centered, spinning circular box using flexbox to center and fill the screen, ready to show during delays on pages.

Design a user dashboard page that shows the logged-in user's name, email, role, and counts of uploaded and downloaded videos, with details fetched via a token in local storage.

Display and style a user info card on the dashboard, showing the logged-in user's name, email, and role with envelope icon and a responsive layout.

Display a responsive dashboard showing uploaded and downloaded video counts from the logged-in user, with flex layouts and styled sections.

Toggle between sign in and dashboard based on local storage token, showing home, my videos, upload video, and user profile, with skeletal loading planned for the next step.

Implement skeletal loading in a mern stack video app using react loading skeleton, rendering skeletons on home and video pages during loading with a responsive grid.

Deploy the frontend of the video hub to Vercel, create the final commit message, push changes, and launch a live site with cdn and serverless features.

Configure vercel.json for front-end and back-end deployments, using rewrites to prevent 404 errors and routing all paths to index.html, and specify routes, build commands, and included files.

Push frontend and backend changes to Vercel, deploy the MERN video app, and fix deployment issues including 404s. Rename the reserved AWS secret key to AWS_secret_key and update references.

Configure AWS credentials and environment variables, set up Multer S3, and deploy and test a hello world API to verify front-end and back-end communication.

Fix CORS error by aligning the frontend URL with the backend API, deploy changes, and test sign up, sign in, and video upload in the deployed MERN video sharing app.