Build WhatsApp clone w video calls Mern stack socket io 2023

Focused View

Mohamed Hajji

21:16:23

112 View

1. Introduction

1. Introduction.mp4

02:13

2. Setup backend

1. Lets setup our backend.mp4

08:00

2. Lets create a basic express app.mp4

08:36

3. Push source code to github.mp4

05:22

4. Cross-env.mp4

05:07

5. Lets add some middlwares (Functionality, Security and Speed).mp4

19:36

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

06:58

7. Handling uncaughtException, unhandledRejection errors and SIGTERM signal closing.mp4

10:47

8. Handling http errors.mp4

06:03

9. Setup routes, trim requests and add controllers.mp4

12:48

10. Create a Mongodb cluster.mp4

08:46

11. Connect to Mngodb, handle connection errors and debug mode.mp4

07:31

3. Setup frontend

1.1 svgs and icons.zip

1. Create react app.mp4

12:11

2. Setup tailwind css, explain variables, dark mode custom classes etc....mp4

17:32

3. Setup react router dom.mp4

06:01

4. Setup redux toolkit store and explain how dispatch actions.mp4

11:13

5. Use redux persist to rehydrate only certain values (smart).mp4

11:51

4. Authentication - backend

1. Creating the user model.mp4

12:34

2. Register a user with validation.mp4

21:16

3. Using Bcrypt to hash password on presave in user model.mp4

06:33

4. Generate access and refresh tokens, store refresh token in cookies in the server.mp4

16:53

5. Login and logout functions.mp4

10:52

6. Generate a new access token using refresh token.mp4

12:02

7. Auth middleware explained in details.mp4

14:13

5. Authentication - Frontend

1. Lets setup the register and login page and its form components.mp4

13:21

2. Adding and explaining react hook form and use it with yup.mp4

09:29

3. Create custom inputs with validation.mp4

19:03

4. Finishing sign up form markup and styles.mp4

09:48

5. Submit register action with AsyncThunk and handling status, error.mp4

21:40

6. Handling picture , handling errors on change.mp4

25:02

7. Upload image to cloudinary.mp4

19:09

8. Working on the login.mp4

09:00

9. Protected routes.mp4

04:19

6. Conversations - backend

1. Conversation model.mp4

07:28

2. Open or create a conversation 1.mp4

12:33

3. Open or create a conversation 2.mp4

19:07

4. Get user conversations.mp4

08:03

7. Messages - backend

1. Create message model and routes.mp4

10:28

2. Send a message.mp4

16:55

3. Get conversation messages.mp4

04:47

8. Home setup, Sidebar conversations and search

1. Home layout, Sidebar header.mp4

14:13

2. Sidebar notifications.mp4

07:19

3. Sidebar search component.mp4

16:26

4. Chat slice.mp4

04:06

5. get conversations.mp4

13:06

6. making few changes in conversation backend.mp4

05:41

7. list conversations.mp4

19:18

8. Show the proper dates from messages in conversation.mp4

23:58

9. Search users backend logic.mp4

14:19

10. Search users frontend.mp4

08:00

11. List Search results.mp4

14:50

12. Sidebar menu and logout functionality.mp4

11:10

9. Chat and messages

1. Whatsapp main component.mp4

09:34

2. Open or create a conversation.mp4

12:06

3. Fixing few thing about conversations (no message and message length).mp4

05:50

4. Full Conversation dispaly header.mp4

17:20

5. Messages component setup and get conversation messages.mp4

11:45

6. List messages.mp4

13:31

7. Chat Actions component layout and component.mp4

11:45

8. Send a message.mp4

14:33

9. Updating conversations after sending message and remove empty conversations.mp4

09:01

10. Chat emojis.mp4

20:14

11. Chat files menu.mp4

13:41

12. Automatic smooth scroll to the end of conversation and fixing submit loader.mp4

07:41

13. Fixing some styling problems (important).mp4

09:49

10. Realtime socket io realtime messages, online status, typing

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

10:29

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

13:41

3. Join user and join conversation.mp4

15:13

4. Send and receive messages realtime 1 + fixing a huge mistake i made.mp4

14:15

5. Send and receive messages realtime (update messages and conversations).mp4

13:47

6. Online status.mp4

21:44

7. Typing....mp4

25:27

11. Sending files

1. Photo attachment component and handling images.mp4

18:37

2. Document attachment component and handling documents, videos, audio files.mp4

16:43

3. Preview files setup.mp4

14:39

4. Preview files -header.mp4

09:27

5. File preview.mp4

10:40

6. Message input.mp4

04:31

7. List all files thumbnails.mp4

16:39

8. Add other files.mp4

10:59

9. Upload files to cloudinary and send message.mp4

23:23

10. loader and remove files.mp4

12:30

11. Send video files preview.mp4

05:52

12. List files with message image and video.mp4

15:48

13. List files with message all the rest.mp4

12:17

12. Video calls

1. Ringing.mp4

21:11

2. Call header.mp4

09:07

3. call area.mp4

04:30

4. Call actions ui.mp4

08:35

5. call videos ui.mp4

09:20

6. video stream and get socket id.mp4

06:51

7. Call user and receive ringing.mp4

18:19

8. Fixing receive ringing component issues.mp4

04:57

9. Call a user and answer the call.mp4

12:43

10. toggle video and ringing sound.mp4

07:07

11. End call.mp4

12:23

12. call time counter.mp4

16:27

13. Group chats

1. Create group lets start.mp4

09:53

2. Search and select multiple users.mp4

11:10

3. Search handler and custom styles.mp4

20:21

4. Create a group backend logic and send request.mp4

18:49

5. fixing the open group chat controller ad frontend.mp4

14:57

6. Group participants pictures.mp4

08:36

Description

Build WhatsApp clone w video calls using Reactj js, Node js, Mongodb, Socket io, Webrtc 2023

What You'll 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 is this for?

react js beginners

Beginner web developer

Junior web developer

React js developer

Node js developer

web developer

What You Need to Know?

A basic knowledge in working with React js

A reasonable knowledge in web development is always welcomed

More details

Description
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!
Who this course is for:
react js beginners
Beginner web developer
Junior web developer
React js developer
Node js developer
web developer

User Reviews

Rating

average 0

Total votes0

Focused display

Hello there ?My name is Mohamed HAJJI, i am a full stack web developer and a good one of course, i have great knowledge in the web development field in both frontend and backend ,i have built countless applications using many different technologies, and my job here is to take everything i know and try and share it with all my fellow developers from all levels especially for new developers because i have been there and i know the struggle of trying to learn and adapt to all the technologies we have nowadays and i will try in my new journey as an instructor to have different courses to build different major projects using different technologies.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.