Build WhatsApp clone w video calls Mern stack socket io

Build WhatsApp clone w video calls Mern stack socket io, available at $74.99, has an average rating of 4.32, with 103 lectures, based on 117 reviews, and has 929 subscribers.

You will learn about Build a Realtime whatsapp clone messaging app with video calls using the mern stack, socket io, webrtc Create a full stack web application like a pro Master React js and all of its secrets and tricks and become comfortable using it for you frontend and backend work Master full authentication system, learn about access and refresh tokens User Redux Toolkit with redux persist for a killer combination for managing state Learn how to work with Mongodb and how to add ,update, remove and query like a pro. Learn how to use Cloudinary to store your images in a new brilliant way and how to upload, search, filter and open a new perspective on working with Cloudinary. Strong advanced form validation using React-hook-form and Zod and learn about the best form validation techniques used Learn how to create protected routes and secure your application and pages. Learn how to work with useState, useReducer, useEffect, useRef, useCallback, event Listeners This course is ideal for individuals who are react js beginners or Beginner web developer or Junior web developer or React js developer or Node js developer or web developer It is particularly useful for react js beginners or Beginner web developer or Junior web developer or React js developer or Node js developer or web developer.

Enroll now: Build WhatsApp clone w video calls Mern stack socket io

Summary

Title: Build WhatsApp clone w video calls Mern stack socket io

Price: $74.99

Average Rating: 4.32

Number of Lectures: 103

Number of Published Lectures: 103

Number of Curriculum Items: 104

Number of Published Curriculum Objects: 104

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will Learn

Build a Realtime whatsapp clone messaging app with video calls using the mern stack, socket io, webrtc

Create a full stack web application like a pro

Master React js and all of its secrets and tricks and become comfortable using it for you frontend and backend work

Master full authentication system, learn about access and refresh tokens

User Redux Toolkit with redux persist for a killer combination for managing state

Learn how to work with Mongodb and how to add ,update, remove and query like a pro.

Learn how to use Cloudinary to store your images in a new brilliant way and how to upload, search, filter and open a new perspective on working with Cloudinary.

Strong advanced form validation using React-hook-form and Zod and learn about the best form validation techniques used

Learn how to create protected routes and secure your application and pages.

Learn how to work with useState, useReducer, useEffect, useRef, useCallback, event Listeners

Who Should Attend

react js beginners

Beginner web developer

Junior web developer

React js developer

Node js developer

web developer

Target Audiences

react js beginners

Beginner web developer

Junior web developer

React js developer

Node js developer

web developer

Welcome to the ultimate course on building a full WhatsApp clone web application using the MERN stack, Socket IO, and WebRTC! In this comprehensive and professional course, you will learn how to create a feature-rich messaging platform that rivals the best.

As Real-time messaging is at the heart of any great chat application, and our course will teach you how to implement this essential feature and you will be able to communicate with others users realtime with ease and with so much functionality. You’ll also learn how to integrate video calls into your application, allowing users to communicate face-to-face with ease and with all the fancy ringing components and sounds .

Stay connected with friends and colleagues by displaying their online status , so you will know when someone is actually online or not and you will know realtime, and make your application is even more versatile by enabling users to send files of all types m talking images videos , rar/zip files pdf/doc etc Our course will guide you through the process of creating group chats, so users can collaborate and share ideas with multiple people at once including some other features groups offer.

Enhance user experience by implementing a typing indicator, which allows users to see when someone is typing a message. Add some fun and personality to your app by incorporating a wide range of emojis for users to express themselves.

Make it easy for users to find specific messages or contacts with an advanced search functionality. And, of course, no modern web application would be complete without a robust authentication system. Our course covers everything you need to know about creating secure login and registration processes, as well as uploading images to the cloud.

By enrolling in this course, you can be confident that you are learning from the best. We guarantee that this is a highly professional build that will equip you with all the skills needed to create an outstanding WhatsApp clone web application. Don’t miss out on this incredible opportunity – sign up today!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Setup backend

Lecture 1: Lets setup our backend

Lecture 2: Lets create a basic express app

Lecture 3: Push source code to github

Lecture 4: Cross-env

Lecture 5: Lets add some middlwares (Functionality, Security and Speed)

Lecture 6: Add a custom logger with winston instead of console.log

Lecture 7: Handling uncaughtException, unhandledRejection errors and SIGTERM signal closing

Lecture 8: Handling http errors

Lecture 9: Setup routes, trim requests and add controllers

Lecture 10: Create a Mongodb cluster

Lecture 11: Connect to Mngodb, handle connection errors and debug mode

Chapter 3: Setup frontend

Lecture 1: Create react app

Lecture 2: Setup tailwind css, explain variables, dark mode custom classes etc

Lecture 3: Setup react router dom

Lecture 4: Setup redux toolkit store and explain how dispatch actions

Lecture 5: Use redux persist to rehydrate only certain values (smart)

Chapter 4: Authentication – backend

Lecture 1: Creating the user model

Lecture 2: Register a user with validation

Lecture 3: Using Bcrypt to hash password on presave in user model

Lecture 4: Generate access and refresh tokens, store refresh token in cookies in the server

Lecture 5: Login and logout functions

Lecture 6: Generate a new access token using refresh token

Lecture 7: Auth middleware explained in details

Chapter 5: Authentication – Frontend

Lecture 1: Lets setup the register and login page and its form components

Lecture 2: Adding and explaining react hook form and use it with yup

Lecture 3: Create custom inputs with validation

Lecture 4: Finishing sign up form markup and styles

Lecture 5: Submit register action with AsyncThunk and handling status, error

Lecture 6: Handling picture , handling errors on change

Lecture 7: Upload image to cloudinary

Lecture 8: Working on the login

Lecture 9: Protected routes

Chapter 6: Conversations – backend

Lecture 1: Conversation model

Lecture 2: Open or create a conversation 1

Lecture 3: Open or create a conversation 2

Lecture 4: Get user conversations

Chapter 7: Messages – backend

Lecture 1: Create message model and routes

Lecture 2: Send a message

Lecture 3: Get conversation messages

Chapter 8: Home setup, Sidebar : conversations and search

Lecture 1: Home layout, Sidebar header

Lecture 2: Sidebar notifications

Lecture 3: Sidebar search component

Lecture 4: Chat slice

Lecture 5: get conversations

Lecture 6: making few changes in conversation backend

Lecture 7: list conversations

Lecture 8: Show the proper dates from messages in conversation

Lecture 9: Search users : backend logic

Lecture 10: Search users : frontend

Lecture 11: List Search results

Lecture 12: Sidebar menu and logout functionality

Chapter 9: Chat and messages

Lecture 1: Whatsapp main component

Lecture 2: Open or create a conversation

Lecture 3: Fixing few thing about conversations (no message and message length)

Lecture 4: Full Conversation dispaly : header

Lecture 5: Messages component setup and get conversation messages

Lecture 6: List messages

Lecture 7: Chat Actions component layout and component

Lecture 8: Send a message

Lecture 9: Updating conversations after sending message and remove empty conversations

Lecture 10: Chat emojis

Lecture 11: Chat files menu

Lecture 12: Automatic smooth scroll to the end of conversation and fixing submit loader

Lecture 13: Fixing some styling problems (important)

Chapter 10: Realtime socket io : realtime messages, online status, typing

Lecture 1: Establish a secure socket.io connection between frontend and backend

Lecture 2: Explaining socket.io by example, create a global socket context to use anywhere

Lecture 3: Join user and join conversation

Lecture 4: Send and receive messages realtime 1 + fixing a huge mistake i made

Lecture 5: Send and receive messages realtime (update messages and conversations)

Lecture 6: Online status

Lecture 7: Typing

Chapter 11: Sending files

Lecture 1: Photo attachment component and handling images

Lecture 2: Document attachment component and handling documents, videos, audio files

Lecture 3: Preview files setup

Lecture 4: Preview files -header

Lecture 5: File preview

Lecture 6: Message input

Lecture 7: List all files thumbnails

Lecture 8: Add other files

Lecture 9: Upload files to cloudinary and send message

Lecture 10: loader and remove files

Lecture 11: Send video files preview

Lecture 12: List files with message : image and video

Lecture 13: List files with message : all the rest

Chapter 12: Video calls

Lecture 1: Ringing

Lecture 2: Call header

Instructors

Mohamed Hajji
Full Stack web developer

Rating Distribution

1 stars: 6 votes

2 stars: 3 votes

3 stars: 6 votes

4 stars: 24 votes

5 stars: 78 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!