React Chat App Full Tutorial 2024 | Realtime Chat Application Project with Firebase

[@LamaDev]

Hi friends :) Thanks for watching. Use this link for discounts on servers and hosting plans: hostinger.com/lamadev Coupon Code: LAMADEV

[@vinithadhanapal5425]

Hi.. can u upload a video about hosting a mern stack website in hostinger .. it will be so usefull lamadev..

[@scottcooper6644]

Thank you! big bonus for returning to standard React tutorials instead of the trend of everybody using Next.JS. also great to have the system design explained at the start so we know what the goal is any what is been done. thank you!

[@vanbayor11]

I think it would be better to use a UI library like Tailwind for future projects so we can focus on what really matters. Thank you!

[@abshb]

Is there a way to support you other than the link ? as your videos helped me greatly...

[@Destro466]

i tried to npm run the completed source code from github but is giving errors please i need source code

[@eQ-13]

Thanks Lama for including deployment as well.

[@SAHIL-fz6mo]

It's paid or free?

[@thomasnarkiss6319]

@@SAHIL-fz6mo It's paid (and might explained the reason of which he's doing this... [...if not even this entire project actually])

[@IITHYDCSEtagore]

00:02 Create a full stack chat application using React and Firebase. 02:50 Deploying the React app using GitHub repository 08:46 Design user chats collection for chat application 11:45 Setting up background color and glass effect with backdrop filter 18:11 Creating user information and chat list components 21:27 Creating the search bar and add new user button on the chat list. 27:06 Implementing scroll effect for chat container 29:49 Styling the chat component with image, text, font weights, and borders. 35:16 Setting up the chat input and icons 38:15 Styling adjustments and adding an Emoji picker component. 43:56 Creating chat app interface layout 46:35 Styling the chat messages for better visual appeal. 52:40 Setting up UI layout with icons and images. 55:50 Styling and formatting the chat application interface 1:02:14 Styling and setting up the login page and components 1:05:28 Creating login and register inputs for new users 1:11:30 Styling input fields, labels, images, and buttons 1:14:28 Adding and using react-toastify library for notifications 1:20:35 Styling the form and user interface elements 1:23:42 Setting up Firebase for backend in React Chat App 1:29:39 Creating user authentication and form data retrieval 1:32:27 Creating user and adding data to Firebase Firestore 1:37:57 Uploading images to Firebase storage and managing the process 1:40:42 Function turned into a promise for returning download URL 1:46:34 Implementing user authentication using Firebase 1:49:40 Understanding the cleanup function and state change in real-time data retrieval 1:55:13 Introduction to State Management tools 1:57:52 Handling user authentication status changes 2:03:24 Importance of State Management tools 2:06:04 Real-time chat data fetching and updates 2:11:35 Fetching and displaying user and chat data using Promise.all and sorting chats 2:14:29 Creating a user search function using Firebase queries 2:20:16 Creating and updating user chats in Firebase with unique chat ID 2:23:18 Updating user chat details in the React Chat App. 2:29:21 Implementing user block feature in chat app 2:31:57 Updating receiver block status based on previous state 2:38:01 Updating chat messages with image support using Firebase. 2:41:10 Updating chat message status and content 2:46:52 Updating chat item background and user chats 2:49:51 Implementing image upload functionality in the chat application. 2:55:29 Implementing message conditions and user blocking in chat app 2:58:59 Implementing user blocking functionality 3:05:30 Easy deployment and management using Cloud panel 3:08:02 Connecting to GitHub repository and server for application deployment. 3:13:24 Creating real-time chat app with Firebase is easy and cost-effective.

[@creativeshorts6028]

Is it responsive

[@faizanali2268]

@@creativeshorts6028 i don't think so

[@cholo2605]

At 1:33 remember to import the auth method from "import { auth } from "../../lib/firebase";

[@kottivlogs6679]

@cholo2605 after importing also it is showing not identified

[@cholo2605]

Hi @@kottivlogs6679 are you exporting auth from the firebase file like this "export const auth = useAuth() "

[@TanjimHasan-b4k]

@@kottivlogs6679 I'm also facing same problem

[@vaishnavipatil6868]

Heyy.. have you resolved the problem?

[@Dmotive1302]

thank you for your help

[@itr_cloud]

I love your approach. You get the barebones structure then you make it look nice making your content really easy to follow!

[@nolep5555]

can you copy the example of env please?

[@bytesize-insights]

@@nolep5555 what are you talking about? provide the time stamp of the video

[@animeEnjoyer2002]

@@bytesize-insights 29:46 why my scroll bar is normal and his is styled.

[@SamSiMmP]

Lama я смотрю тебя уже больше года, с самого начала моего обучения. По твоим видео и советам по практике уже выполняю тестовые задания для устройства на работу. Просто хочу сказать тебе большое спасибо за твои уроки. Каждый дизайн прекрасен. Я серьёзно Бро, продолжай радовать людей новыми видосами. обнял 🤝

[@ram0973]

Приподнял

[@kachnashevse]

Бро, можешь помочь? Загрузка модуля по адресу «127.0.0.1:5500/src/main.jsx» была заблокирована из-за неразрешенного MIME-типа («text/jsx»). Вот такая ошибка вылазит, что делать

[@gireeswar18]

For people who stuck at logging in 2:05:40 , just add auth to ur signin function await signInWithEmailAndPassword(auth, email, password); like this and if u still get error, try importing manually and check the name attributes of the Login form as it should match with form data values.

[@DeukamYann]

thanks. Excuse me i have a problem. When i add the useEffect as in the end of the chatDetailComponentDesign my UI becomes weird

[@gireeswar18]

@@DeukamYann I haven't completed I will update when I finish

[@muheedeensefiu]

My VITE_API_KEY keeps telling me undefined

[@gireeswar18]

@@muheedeensefiu have u installed dot env

[@gireeswar18]

@@muheedeensefiu have u installed dot env

[@braveitor]

Impressive tutorial. Clear, concise, very interesting. Congratulations and thank you for sharing your knowledge.

[@Souleater127]

good tutorial. as a webdev-react-beginner this helps alot thanks. well, i could follow up until 1:24:00 but.. damn. I need at least 1 year to digest all after.

[@johndevnoza4223]

u ll learn a lesson :D u shouldnt follow such a tutorials..

[@sam-j4zy]

much love for your content sir.

[@oli-9609]

Hey Lama ! Thanks for the great content. I've just started using react and your channel is helping me a lot !

[@JayTheMachine]

frontend ends at 1:23:00, and backend start from there, you're welcome.

[@nolep5555]

can you copy the env.example please

[@rockbelleh6237]

Lama My teacher n mentor.tnks a lot u r touching lives

[@creativeshorts6028]

Is it responsive

[@bhabhaseptember9467]

I'm using this tutorial for a final project for React. Thank you so much! You are a star!!!!

[@gustavogutkoski]

Thanks Lama, nice approach, using your example for doing a chat app using Django in back-end, thanks again!!!

[@sharmastyles2749]

OMG I never completed this level of project till now but in 3 days I completed a large scalable application all credit goes to you 🙏🙏

[@mengistu3137]

I love you much much ...realy your content is unique

[@avenolchits-o7l]

the best layout i have seen sofar !!!

[@Muhammadqodir2010]

1:02:55 Actually, you should have made this details scrollable.

[@kevinkiumbe5620]

@lamaDev thank you for doing this tutorial , this is the kind of content college will never teach ! I'm glad to have come across this channel

[@Soap_js]

Lama Dev is the Best, sharing hours of content for free. hats of to you man

[@MacFly669]

Excellent introduction to React and Firebase, thank you so much for this project ! 💪

[@strictlyunreal]

1:14:00 Man, I hate nesting CSS. Case in point! It makes it much harder to navigate through the document. That's why BEM makes much more sense! And I mean BEM written without any of that nested "&" either! In my opinion, the balance should always lean more towards code readability than convenience while writing it! You write code once, but you read it countless times! Note: I know this is a tutorial and it's faster this way, so this manner is appropriate here, but I hope people are not going to do this in real life projects! I've worked on projects written like this and it was hell!

[@akashddeepchitransh4537]

Hey I really love your approach! I really appreciate if you do system design kind of thing first and then code in upcoming projects also.

[@creativeshorts6028]

Is it responsive

[@kartpop]

Thanks!

[@amirabbasgholami-y6f]

The way this man say image >>>>>>>>>>>>>>>>>>>>>>>>>>>

[@agikedwin8589]

Powerful, well explained. You're a great teacher sir.

[@ClashGamer-u8p]

when i go to setup firebase storage, get started option was there upgrade will be shown.

[@juanmacias5922]

9:23 probably would have been better to have one chat/message collection, and query messages that match sender & receiver uuids.

[@arasubala7749]

Need a Full Stack Clone of video chat app like zoom...where we can make one on one video call and group video call.

[@Neil452]

Javascript mastery just made one

[@SixtusNwaogu]

@@Neil452 Link to video please

[@Neil452]

@@SixtusNwaogu kzbin.info/www/bejne/iGmmeoJneb9lmJosi=BHF_BCLBTRjh0w8M

[@HarishSharma-cy7gm]

2:24:58 user was not adding in the chat list and chat id and receiver id is working i stuck on this

[@stevenvisibleone]

same here and I don't know what to do. No matter how i change It not working. Bro Do you found solution??

[@dinesh1361]

@@stevenvisibleone have you found it bro?

[@dalestewart]

Top notch Professional Application👍

[@siddharthpandore5492]

can somebody help, I'm stuck at 2:25:00 where i can't get the chats Id in the userchats, Although I'm able to search the person but unable to add the user in the list?

[@muskanbhansali5393]

Did you found out then?

[@siddharthpandore5492]

@@muskanbhansali5393 No, actually I've tried 4 times. Do you facing the same problem?

[@itobiyeblossom5842]

same here have you found solution i am stuck

[@siddharthpandore5492]

@@muskanbhansali5393 No, still stuck there

[@siddharthpandore5492]

@@itobiyeblossom5842 Nop!

[@ritesh1293]

You should be using memo, callbacks, and async/await for efficient functioning. its two laggy without these function

[@creativeshorts6028]

Is it responsive

[@YoussefMohammed-Matrix]

@@creativeshorts6028 no

[@Aryan-oj2vn]

Awesome!....Jaast laayk dhatt!!

[@cookiee7016]

Hey lama! What are you programming on? Is it a macbook?

[@ttt1791]

Access to XMLHttpRequest at ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

[@zhuochen8793]

Thank you!!!!! Your content save my life!!!

[@x_kirito_x9694]

wow sir, you make it to look so easy and efficient, its rly helping me to follow your work. After doing all of your projects I will return to this comment to tell you much I have improved....rn I'm suffering from making even a single page website

[@creativeshorts6028]

Responsive h ye app?

[@thebeastguy6925]

Hey at timestamp 2:02:56 how did you go to home page from login page unable to figure out trying it since last 2 hours please help me @Lama Dev

[@happymalyo_]

You saved me! Thank you. Keep it up Lama :)

[@gireeswar18]

Yo! Finally finished this project!

[@lazyboymr4537]

Bro full stack project or react js project

[@gireeswar18]

@@lazyboymr4537 react js with firebase, its kinda full stack with only react

[@umarhayatudeen2307]

help whthe code please

[@gireeswar18]

@@umarhayatudeen2307 what help bro

[@gireeswar18]

@@lazyboymr4537 react with firebase

[@FaselGodbcho-e7w]

Thanks for the comprehensive tutorial

[@goyalArpan]

1:46:57 Loading working for both button, but it shouldn't behave like this right ???

[@falcon-daniel9695]

Please help me in the minute 2:17:38 what that means. because login is good. But after logging in, it showed nothing

[@abdulsamadswani495]

ئەمن کرێکارم لە ساحێب چەناڵەکەی بپرسە

[@falcon-daniel9695]

@@beboto yes but didn't work .i don't know why

[@owoadeadedayo4198]

Lama is the best🎉🎉

[@dmytrot5238]

Thanks a ton for this tutorial! Just finished coding, everything works perfectly. Have just one question - when you choose image file, looks like this only sends picture to chat locally in browser. Upload logic is implemented in "handleSend" which will be be returned immediately in case we don't have text non-empty. Is this kind of a bug you think?

[@iqbalbhatti49]

Sir! Can you make same tutorial using MERN Stack?

[@fashionaddaudaipur4023]

Cannot read properties of undefined (reading 'messages') it showing this error i have copied ur code

[@SanthoshKumar-lf1tt]

Your videos are helping me alot. Could you please creat any fullstack project where use next js as frontend and express js as backend including jwt authentication.

[@hackman2829]

Great tutotorial, it's very helpful!!! I was wondering if you could continue this project but also implementing the audio and video call options between users and maybe also creating group chats, it would be amazing and very interesting to see! Thank you anyway!!!

[@creativeshorts6028]

Is it responsive

[@hackman2829]

@@creativeshorts6028 you make it responsive BTW I managed to implement audio and video call by myself using WebRTC technology

[@thebeastguy6925]

Hey at timestamp 2:02:56 how did you go to home page from login page unable to figure out trying it since last 2 hours please help me @Lama Dev

[@gireeswar18]

have you found it bro

[@thebeastguy6925]

@@gireeswar18 yes

[@gireeswar18]

@@thebeastguy6925 I too brother and made a comment 👍

[@thebeastguy6925]

@@beboto yes

[@gireeswar18]

@@beboto no bro still one more hour to go lot of bugs

[@favanzzo]

ty for the video! any ETA for your react course?

[@dav.R7]

Hi LamaDev, your content is always amazing. Is there a video teaching how to integrate your own backend with nextjs?

[@creativeshorts6028]

Is it responsive

[@SixtusNwaogu]

Thanks, was a good mini course. Learnt alot 👍

[@johncmm9759]

Hello Mr. Lama Dev, my dearest friend. This is absolutely amazing. I’d love to use this as a guide for a web app im building, how can I give you appropriate credit? Would you like a link to this video in the code base or is there a repo o can cite? Thank you for everything you do!

[@aryanchauhan08]

did that camera video call and voice call works?

[@himankshu]

Again a nice project ❤

[@HONOREDONE-hk7pt]

did you complete it? were there any problems?

[@himankshu]

@@HONOREDONE-hk7pt I didn’t complete it but you can surely rely on him

[@thebeastguy6925]

Hey at timestamp 2:02:56 how did you go to home page from login page unable to figure out trying it since last 2 hours please help me @Lama Dev

[@himankshu]

@@HONOREDONE-hk7pt nope

[@israelmitolu5365]

Awesome way of teaching!

[@amigos786]

Amazing work. Thanks for your time and efforts, much appreciated. I would like to see how this can be extended to a group chat mode.

[@ourvideosite]

Hi Lama, do you create courses on demand?

[@htmoh8115]

I been stuck on making a working live chat that I can deploy. No help from developers. I seriously hope this works. Making chat rooms where you can upload pics, vids etc

[@stevenvisibleone]

this project not working don't waste your time mate.

[@htmoh8115]

@@stevenvisibleone thx for letting me know mate.

[@thomasnarkiss6319]

Actually I think that the entire purpose of this video is that you will use the sponsored platform to deploy this project (not free though), but we haven't tried it - after realizing that there are some issues (responsiveness, for example, or the fact that some icons are only show-off rather actually functional). The fact that some comments (not necessarily bad, unpolite, oor anything line that) have been deleted are also suspectful...

[@antoncigur2724]

how did you remove the scrollbar in the Chatlist component? You didn't specify anything in the css file, but your scroll still doesn't show

[@kashmirtechtv2948]

overflow-y

[@denikanthr-vs9wh]

.chatList{ scrollbar-width:none; }

[@moarghostnstuff]

all the snippets work except for compt and comp. Am i missing an extension in vs code?

[@YashJoshi-sk8tk]

Hi @LamaDev, for the addUser component, the new box where we can add user is showing under the chat i.e. I am not able to type username for search as there is layer of image or text message from the chat. I check video multiple times, but everything feels same as video, can you or anyone help me in this one ?

[@mind.less2205]

same issue my add new user comcopent is coming with the list

[@cyberknight339]

Did u make the component position: absolute?

[@naxgat]

what happened in 2:17:40 i can't understand

[@AshutoshPandey-bu7of]

2:26:03 The chatlist loaded the user info but in my project it is not fetching the data I debugged the code and saw const userDocRef = doc(db, "chats", item.receiverId); no data is being fetched for some receiverId documents in the "chats" collection. but I checked database collection it has receiverId, could someone help me with these

[@dinesh1361]

have you resolved it bro?

[@Alalspsp]

I finished this project a few months ago. At the time, it worked well without any problems. Time passed and I tried to open it again, but an error occurred. Firebase: Error (auth/invalid-email) I spent 5 hours trying to fix this error, but ultimately failed. It seems that not only me but also other people can't escape this error. I would really appreciate your help.

[@aryankaushik9373]

for me its saying auth is not defined...when i enter email and pass to signup at 1:33:26 do you have any solution ?

[@chinmayeegowda5867]

you should change some properties in firebase then it will work

[@CantIllaoiThat]

@@chinmayeegowda5867 Great feedback!

[@arzuaydemir2543]

i get this error from singing up without choose avatar. I changed this line from login.jsx const imgUrl = await upload(avatar.file); with these: let imgUrl = ''; if (avatar.file) { imgUrl = await upload(avatar.file); } else { imgUrl = './avatar.png'; }

[@szymon_JD]

Great video, will you make projects like that with tailwindcss in the future?

[@erayates310]

Thanks for this good video. Will you push the full code of the project to github?

[@sidshehria]

the style of scroll in list is not like you it is defult one what should i do ????

[@creativeshorts6028]

Is it responsive

[@Razes9ooo474lO4]

Great Teacher ....🙏

[@Rahulbabu-hh6dx]

tht scroll feaure mine is visible that thick ? why is it something related with the os

[@atayeroclinton3957]

is anyone experiencing this issue with Firebase "Cross origin redirect sign-in on Google Chrome M115+ is no longer supported, and will stop working on June 24, 2024." and what alternative can one make use of?

[@kaira1402]

same issue

[@bashardev]

Thanks Lama! What is the theme name of your VS?

[@laibaasif2208]

well can't we make a voice message and what about call and video call functionality

[@Adityaw25]

sir i have a question, if i cant upload the project to vps but i just upload on github hosting, is it still running normally?

[@sajaljain5919]

how did you get scroll style at 29 min

[@lembocsgo]

I think its because of his browser

[@srijitofficial]

My vs code is showing 4 errors in the snippets!!

[@Emrantechservices]

the scroll bar is not becoming transparent on scroll giving a very bad effect

[@sundar263]

Could someone tell me what to do with that firebase storage since its requiring upgrade to use is there any alternative

[@meenukumari4721]

Facing the same issue, did you find a solution?

[@cristiplays6797]

Same here. Im looking for a solution to host it using a local database. Any ideas?

[@21Mayhem]

2:05:16 why did he add fetchUserInfo to the dependancy array

[@9622AX]

Cool App. WebSocket's tutorial next

[@98parth]

Haven't gone through the video yet, but does this app not use web sockets?

[@dickson710]

@@98parth seems not using, just User A send message to User B, then login as User B to view the message.

[@juanmacias5922]

@@98parth Firebase uses subscriptions, similar, but different.

[@9622AX]

@@98parth No its all Firebase

[@martinwiytiszen8625]

I love these videos, is there a channel that does something similar in React Native?

[@Wladyslaw1440]

At 17:14 how do you do that because even when I write them there’s an error… Edit: nevermind I fixed it

[@somyajain1683]

Mere me bhi error aa rha hai login krne pr auth is not defined aa rha jo solve bhi nhi ho rha and firebase storage bhi paid bta rha kya kru pls help

[@Uplift-Talks]

can anyone explain how the login screen changed from login to homepage/dashboard, i have written the same code but still login page is displaying

[@creativeshorts6028]

Is it responsive

[@thebeastguy6925]

hey did you get it I'm stuck at it

[@factzfactory4956]

Lama Please create some AI+MERN projects where we use various models from huggingface or create some cool AI/ML models and integrate it in frontend I wish to learn these projects Eg: Creating OpenCV project and integrating it with NEXTjs for video feed using Sockets Eg: Automating Financial Planning using Generative AI Love your projects ❤

[@fashionaddaudaipur4023]

after cloning the ranch i have try to copy paste the but its not working

[@dimasalanta]

is it possible to deploy this on firebase hosting? and what was the backend used for this, was it firebase as well?

[@suyashmishra6946]

firebase handles everything

[@GameVerse215]

hi lama are you gonna create a video using mongo or postgres sequelize

[@gouthamnature]

How to build resume building project which similar to flowCv and admin can add resume templates where user can customise, download and share resume, using Mern stack technology, I hope you will considere this project

[@hv6411]

Beautiful project! TY🤩🙏🏼I got stuck a few times🥵 but I got it working!

[@Anirudha6]

Am getting error after completing project, typeerror cannot read properties of undefined reading 'messages'

[@Anirudha6]

Can you help me

[@asdfg1346on]

Hey, im a bit late but love your videos. Can you please do a video on how to use AI models from huggingface in a react or next js app? Because they have a lot of models hosted there but a video on how to use a conversational model would be excelent please. i cant find anywhere on yt a video like that..

[@Krishnash1355]

This is awesome "Just Like That"

[@pennywiseff140]

I noticed that you are using images as buttons and this is a bad practice as the images can't be focused which means a lack of accessibility

[@ShahnawazSayyad]

Can you make a Video on Hostinger VPS hosting with Nextjs??... including domain mapping and implementing a local Postgres database??.. will be highly oblighing... thank you..

[@f4esensiop]

but my scrolling bar are changing as a different type please help me

[@abdullah19957]

Hi list.css : ::-webkit-scrollbar { width: 5px; background: transparent; } ::-webkit-scrollbar-thumb { background: black; border-radius: 10px; } and chatList.css overflow-x: hidden;

[@DhimanAbhinav]

at 2:03:16 even after following I am not able to redirect to chat page from login page

[@YourName-ws6mc]

did u solve the problem ?

[@funese102]

Hey can you please make the full-stack inventory management apps with Postgres Database?

[@tusharjha7017]

i accidentally deleted mu users collection is ther any way to make database function as before and can i progress in project with this problem

[@QuayNguyenVan-u3f]

How to Block / Unblock User? so after that complete block user , i open 2 tab to check button working real-time. but still page currentuser can working button and change text in button Block. anonymus browser not change text realtime in button block , i must do press F5 to show result. this is error real time ?