Whatsapp Clone Using MERN Stack

In this FREE training, let's build a Whatsapp Clone from scratch using MONGO, EXPRESS, REACT, NODE, SOCKET.IO (MERN Stack).

Features:
1. Basic chat functionality.
2. Typing indicators.
3. Preview message.
4. Send attachments.
5. Send voice messages. (COOL)

We will be using React Hooks like useEffect, useReducer, useContext, useState and more.

For a realtime chat, we will use socket.io.
For the backend, we will use Nodejs/Express to create our API.
We will be storing our chats in Mongo.
And for user activity, we will use Redis.

I hope you will enjoy this video and learn something from it.

Part 1: HTML/CSS

Part 2: LOGIN PAGE DESIGN

Part 3: API/SOCKET

Part 4: REACT FUNCTIONALITY

Comments

React Hook for Tracking Changes to Screen Size

When building responsive web applications, it's essential to be able to track changes to the screen size. This is important because different screen sizes may require different layouts, styles, or even components. One way to track changes to the screen size is to use the window object's resize event. Whenever the window size changes, the resize event is fired, allowing us to update the layout, styles, or components as necessary. In this article, we'll show you how to create an advanced React hook that tracks changes to the screen size using the resize event. Creating the useScreenSize Hook The useScreenSize hook is a custom React hook that uses the useState, useEffect, and useCallback hooks to track changes to the screen size. Here's the code for the useScreenSize hook: -------------------------------- -------------------------------- import { useState, useEffect, useCallback } from 'react'; function useScreenSize() { const [screenSize, setScreenSize] ...

CORS ISSUE

Install CORS extension https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en Don't forget to switch it on

Evernote Clone Using MERN Stack

In this FREE training, let's build an Evernote Clone from scratch using MONGO, EXPRESS, REACT, NODE (MERN Stack). We will be using React Hooks like useEffect, useReducer, useContext, useState and more. For the backend, we will use Nodejs/Express to create our API We will be storing our notes in Mongo. Part 1: HTML/CSS Part 2: NODE/MONGO Part 3: REACT

Coding Realtime

Search This Blog