Build a real time chat app with Firebase and React.js | Beginner tutorial

[@akporraphael9069]

A real life saver. I've been looking for recent tutorials to implement chat app functionality with firebase, most of em are outdated or won't work after implementing it. At least this is a stepping stone. Thanks 👍

[@aleggs2813]

Great video, quick question though im very new to this. At 6:58 you say the dependency array should specify to run on every render/update, but the DA is [ ]. Shouldn't it be omitted if we wanted it to run on every render? My lecture notes say [ ] makes it only render once when the component is mounted.

[@fiend_1108]

is there a way where we cn have multiple chats, instead of one global chat where anyone can join with email

[@WebChainDev]

Yes, that's possible. I believe the structure would be something like this: a chats collection which would hold each chat as a document. This document would have fields with the people who own the chat and a messages collection like the one in this video.

[@fiend_1108]

@@WebChainDev could you possibly make a small tutorial on it, it would be really helpful

[@anishgupta2915]

@@WebChainDev sir how join other in chatroom with his mail

[@anishgupta2915]

yes sir @@fiend_1108

[@YassineEnnachat]

I think it would be better if you explained what the imported functions do upon writing the import that way we can understand why they need to be imported. and how each section of the line does like the snapshot.docs.map what does each one do "snapshot" "docs" "map"

[@MujahidulIslam]

firstly thanks for make this video,, i didn't understand your source code 79 and 80 number line code. Can you explain to me? because i am beginner.

[@WebChainDev]

In this block of code we are mapping through all of the messages. msg.data.uid === user.uid checks if the sender of the message is the current user (by seeing if their uids are the same) , and if so, places the message of the right side of the screen, otherwise putting it on the left. The next line does the same thing but applies some styles to the background and text color. Hope this helped

[@ranviee]

Source Code?

[@WebChainDev]

Here it is: gist.github.com/Mif2006/a12076e9d48444df7b3f348634a3caba

[@ranviee]

thank you 😆@@WebChainDev

[@lorenzoj7925]

Everything was going well but at last i got this error while connecting to local host [plugin:vite:react-babel] C:\Users\loren\OneDrive\Desktop\Loren Chat\src\App.jsx: Unexpected keyword 'const'. (10:4) 13 | It cannot verify the word const

[@WebChainDev]

In these cases the error is usually a typo in some other place. I suggest checking the source code to see where it is