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

Published: 17 February 2023
on channel: Coding With Dawid

227,034

7.5k

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

On this page of the site you can watch the video online Build a Fullstack CHAT App using MERN (mongo, express, react, node) with a duration of hours minute second in good quality, which was uploaded by the user Coding With Dawid 17 February 2023, share the link with friends and acquaintances, this video has already been watched 227,034 times on youtube and it was liked by 7.5 thousand viewers. Enjoy your viewing!

118