Build a Fullstack CHAT App using MERN (mongo, express, react, node)

Coding With Dawid February 17, 2023
Video Thumbnail
Coding With Dawid Logo

Coding With Dawid

View Channel

About

Video Description

In this beginner friendly tutorial, I'm going to show you how to build a fullstack chat app using MERN (mongo, express, react, node). It will be a chat app with a lot of cool features like online indicator, uploads/attachments, auto-scrolling and many others This chat app tutorial is designed for beginners and will teach you the basics of building a chat system app using MERN and websockets. By the end of this tutorial, you will have a working chat app that you can use for your portfolio. You will also understand how to use websockets, authenticate connections and so on. Source code: https://github.com/dejwid/mern-chat Timestamps: 00:00:00 - intro 00:02:06 - installing react and tailwind css 00:05:58 - login and register 01:23:10 - chat page 01:30:35 - websockets (authentication) 01:44:43 - showing who is online 02:01:05 - user avatars 02:12:52 - selecting conversation 02:27:32 - sending a message 03:16:58 - auto scroll the conversation window 03:29:23 - fetching history messages from the database 03:41:10 - auto re-connecting 03:49:16 - displaying the messages from the database 03:59:28 - online indicator & showing offline people 04:24:48 - killing old connections 04:34:47 - logout button & showing username of logged in user 04:49:14 - attachments / file upload 05:23:17 - fixing small display bug 05:26:37 - outro

You May Also Like

Crave-Worthy Air Fryer Meals

AI-recommended products based on this video

Loading...
Portable Air Conditioner, Air Conditioner Portable with 3 Speeds, 3 Mist Settings, 1200ml XL Water Tank, 2~8h Timer, Portable Ac Unit, Small Mini Air Conditioner, Personal Air Cooler Fan for Bedroom

Portable Air Conditioner, Air Conditioner Portable with 3 Speeds, 3 Mist Settings, 1200ml XL Water Tank, 2~8h Timer, Portable Ac Unit, Small Mini Air Conditioner, Personal Air Cooler Fan for Bedroom

(20)
$64.49
FREE delivery Sat, Jun 28
Loading...
Conair Ceramic Long Barrel XL Curling Iron, 1 ½” Barrel Produces Classic Curls – for use on Medium and Long Hair, Hair Curler

Conair Ceramic Long Barrel XL Curling Iron, 1 ½” Barrel Produces Classic Curls – for use on Medium and Long Hair, Hair Curler

(13,305)
$25.95
FREE delivery Thu, Nov 27 on your first order
500+ bought in past month
Loading...
ICEPURE Pitcher Water Filter Replacement for Brita® Standard Water Filter, Brita® Pitchers and Dispensers,Classic OB03, Everyday, UltraMax, Metro+, XL, Mavea® 107007 35557 and More NSF Certified 6PACK

ICEPURE Pitcher Water Filter Replacement for Brita® Standard Water Filter, Brita® Pitchers and Dispensers,Classic OB03, Everyday, UltraMax, Metro+, XL, Mavea® 107007 35557 and More NSF Certified 6PACK

(3,361)
$23.72
FREE delivery Tue, Sep 23 on your first order
100+ bought in past month
Loading...
Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

(2,436)
$7.99
FREE delivery Mon, Jun 16 on your first order
Loading...
Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

(650)
$100.99
FREE delivery Thu, Oct 16
500+ bought in past month
Loading...
Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

(2,436)
$7.99
FREE delivery Mon, Jun 16 on your first order
Loading...
Magnetic Car Mount Air Vent Cell Phone Holder, Universal Vehicle Dash Dashboard Ac Airvent Cellphone Magic Stand with Clip Hook, for iPhone 16 15 Samsung Lenovo Google etc

Magnetic Car Mount Air Vent Cell Phone Holder, Universal Vehicle Dash Dashboard Ac Airvent Cellphone Magic Stand with Clip Hook, for iPhone 16 15 Samsung Lenovo Google etc

(128)
$21.99
FREE delivery Tue, Jun 17 on your first order
Loading...
Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

(650)
$100.99
FREE delivery Thu, Oct 16
500+ bought in past month
Loading...
Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

(2,436)
$7.99
FREE delivery Mon, Jun 16 on your first order
Loading...
Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

(650)
$100.99
FREE delivery Thu, Oct 16
500+ bought in past month
Loading...
Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

Ninja Air Fryer Pro 5-in-1, 5 QT Capacity, Air Fry, Bake, Roast, Reheat, and Dehydrate, Air Crisp Technology, Nonstick Basket & Crisper Plate, Grey, AF142C

(650)
$100.99
FREE delivery Thu, Oct 16
500+ bought in past month
Loading...
Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

(2,436)
$7.99
FREE delivery Mon, Jun 16 on your first order
Loading...
Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

Glass Oil Sprayer for Cooking, 180ml Olive Oil Sprayer Bottle with Brush, Olive Oil Spray Mister, Kitchen Gadgets Accessories for Air Fryer, Canola Oil Spritzer (GREY)

(2,436)
$7.99
FREE delivery Mon, Jun 16 on your first order