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

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: 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