Mern Stack Real Time Chat App - React , Node , Socket Io

Build a Real Time Chat Application With React , Node , Socket IO

What you'll learn

Working with complex MongoDB, queries, schemas, models like chats, messages

Working with Socket IO , Detailed explanation about Socket IO and Socket Rooms

Real-time messaging with the socket rooms

Typing animation on the receiver side when the sender starts typing the message.

Get the user's online status and activity , Get real-time notifications for messages

Sharing emojis and images through socket

Pushing Code to GitHub, Hosting application in Render , Complete Source Code

Requirements

Javascript Basic

Description

Hi Guys, Welcome to the course 'MERN Stack  Real Time Chat Application'In this course, you will learn the following topicsBuilding full-stack real-world applications from scratchWorking with complex MongoDB, queries, schemas, modelsWorking with Socket IODetailed explanation about Socket IOOne-to-one conservationReal-time messaging with the socket roomsGet the user's online status and activityGet real-time notifications for messagesRead receipts and clear unread messages after reading.Typing animation on the receiver side when the sender starts typing the message.Storing all the messages and chats data in Mongo dBPushing Code to GitHub,Hosting application in Heroku24/7 Q/A Support.MERN stands for MongoDB, Express, React, and Node, after the four key technologies that make up the stack.MongoDB - document databaseExpress(.js) - Node.js web frameworkReact(.js) - a client-side JavaScript frameworkNode(.js) - the premier JavaScript web serverExpress and Node make up the middle (application) tier. Express.js is a server-side web framework and Node.js is the famous and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser designed to build scalable network applications.

Overview

Section 1: Introduction

Lecture 1 What we are developing ?

Section 2: Front End Setup

Lecture 2 React App Setup / Github Link

Lecture 3 Tailwind CSS Setup

Lecture 4 Folder Structure

Section 3: Register and Login UI

Lecture 5 Registration Screen

Lecture 6 Login Screen

Section 4: Backend Setup

Lecture 7 Node JS Setup

Lecture 8 Node Mongo Connection

Section 5: Register and Login Backend

Lecture 9 User Model and API's

Lecture 10 Login , Register API's integration

Section 6: Authorization

Lecture 11 Authorization Part - 1

Lecture 12 Authorization Part - 2

Section 7: Redux Setup

Lecture 13 Redux Setup

Lecture 14 Showing Loaders using States

Section 8: Home Screen

Lecture 15 Layout

Lecture 16 Users Search

Lecture 17 Users List

Section 9: Chats

Lecture 18 Chat API's

Lecture 19 Create Chat

Lecture 20 Chat Area

Lecture 21 Chat Input

Section 10: Messages

Lecture 22 Send Message

Lecture 23 Get Messges

Lecture 24 Last Message in Selected Chat

Section 11: Unread Messages

Lecture 25 Unread Messages Count

Lecture 26 Clear Unread Messages

Lecture 27 Users List Refractor

Section 12: Sockets Intro

Lecture 28 Sockets Intro

Lecture 29 Sockets Rooms

Section 13: Realtime messages

Lecture 30 Messages with sockets - 1

Lecture 31 Messages with sockets - 2

Lecture 32 Bug Fix

Section 14: Unread Messages and Read Receipts

Lecture 33 Unread Messages Count using Socket

Lecture 34 Clear unread messages with sockets

Section 15: Typing and Online Users

Lecture 35 Typing Indicator

Lecture 36 Show online users

Lecture 37 Sort Chat List based on Latest Chat

Lecture 38 Show dates and times accordingly

Section 16: Emojis and Image sharing

Lecture 39 Emojis

Lecture 40 Profile Pic - UI

Lecture 41 Profile Pic - Backend

Lecture 42 Image sharing

Section 17: Bug Fixes and Deployment

Lecture 43 Fixes Part - 1

Lecture 44 Fixes Part - 2

Lecture 45 Deploy to Render

Full Stack Developers