Build WhatsApp clone w video calls Mern stack socket io

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Setup backend

Lecture 1: Let's setup our backend

Lecture 2: Let's create a basic express app

Lecture 3: Push source code to github

Lecture 4: Cross-env

Lecture 5: Let's 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: Let's setup the register and login page and it's 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