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

Pubblicato il: 17 febbraio 2023
sul canale di: 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

In questa pagina del sito puoi guardare il video online Build a Fullstack CHAT App using MERN (mongo, express, react, node) della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Coding With Dawid 17 febbraio 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 227,034 volte e gli è piaciuto 7.5 mille spettatori. Buona visione!

47,152