Build WhatsApp clone w video calls Mern stack socket io 2023

سرفصل های دوره

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

1. Introduction

1. Introduction

2. Setup backend

1. Lets setup our backend

2. Lets create a basic express app

3. Push source code to github

4. Cross-env

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

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

7. Handling uncaughtException, unhandledRejection errors and SIGTERM signal closing

8. Handling http errors

9. Setup routes, trim requests and add controllers

10. Create a Mongodb cluster

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

3. Setup frontend

1.1 svgs and icons.zip

1. Create react app

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

3. Setup react router dom

4. Setup redux toolkit store and explain how dispatch actions

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

4. Authentication - backend

1. Creating the user model

2. Register a user with validation

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

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

5. Login and logout functions

6. Generate a new access token using refresh token

7. Auth middleware explained in details

5. Authentication - Frontend

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

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

3. Create custom inputs with validation

4. Finishing sign up form markup and styles

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

6. Handling picture , handling errors on change

7. Upload image to cloudinary

8. Working on the login

9. Protected routes

6. Conversations - backend

1. Conversation model

2. Open or create a conversation 1

3. Open or create a conversation 2

4. Get user conversations

7. Messages - backend

1. Create message model and routes

2. Send a message

3. Get conversation messages

8. Home setup, Sidebar conversations and search

1. Home layout, Sidebar header

2. Sidebar notifications

3. Sidebar search component

4. Chat slice

5. get conversations

6. making few changes in conversation backend

7. list conversations

8. Show the proper dates from messages in conversation

9. Search users backend logic

10. Search users frontend

11. List Search results

12. Sidebar menu and logout functionality

9. Chat and messages

1. Whatsapp main component

2. Open or create a conversation

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

4. Full Conversation dispaly header

5. Messages component setup and get conversation messages

6. List messages

7. Chat Actions component layout and component

8. Send a message

9. Updating conversations after sending message and remove empty conversations

10. Chat emojis

11. Chat files menu

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

13. Fixing some styling problems (important)

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

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

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

3. Join user and join conversation

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

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

6. Online status

7. Typing...

11. Sending files

1. Photo attachment component and handling images

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

3. Preview files setup

4. Preview files -header

5. File preview

6. Message input

7. List all files thumbnails

8. Add other files

9. Upload files to cloudinary and send message

10. loader and remove files

11. Send video files preview

12. List files with message image and video

13. List files with message all the rest

12. Video calls

1. Ringing

2. Call header

3. call area

4. Call actions ui

5. call videos ui

6. video stream and get socket id

7. Call user and receive ringing

8. Fixing receive ringing component issues

9. Call a user and answer the call

10. toggle video and ringing sound

11. End call

12. call time counter

13. Group chats

1. Create group lets start

2. Search and select multiple users

3. Search handler and custom styles

4. Create a group backend logic and send request

5. fixing the open group chat controller ad frontend

6. Group participants pictures

139,000 تومان

افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training