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: 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
Watch video Build a Fullstack CHAT App using MERN (mongo, express, react, node) online without registration, duration hours minute second in high quality. This video was added by user Coding With Dawid 17 February 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 221,077 once and liked it 7.5 thousand people.