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])

[@SamSiMmP]

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

[@ram0973]

Приподнял

[@kachnashevse]

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

[@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

[@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.

[@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

[@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

[@braveitor]

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

[@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 🙏🙏

[@sam-j4zy]

much love for your content sir.

[@bhabhaseptember9467]

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

[@rockbelleh6237]

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

[@creativeshorts6028]

Is it responsive

[@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..

[@MacFly669]

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

[@Soap_js]

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

[@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

[@oli-9609]

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

[@avenolchits-o7l]

the best layout i have seen sofar !!!

[@gustavogutkoski]

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

[@mengistu3137]

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

[@amirabbasgholami-y6f]

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

[@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!

[@dalestewart]

Top notch Professional Application👍

[@JayTheMachine]

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

[@nolep5555]

can you copy the env.example please

[@agikedwin8589]

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

[@owoadeadedayo4198]

Lama is the best🎉🎉

[@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

[@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

[@cookiee7016]

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

[@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

[@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

[@happymalyo_]

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

[@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!

[@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!

[@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

[@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

[@FaselGodbcho-e7w]

Thanks for the comprehensive tutorial

[@zhuochen8793]

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

[@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.

[@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

[@Muhammadqodir2010]

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

[@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

[@Aryan-oj2vn]

Awesome!....Jaast laayk dhatt!!

[@goyalArpan]

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

[@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 ❤

[@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?

[@SixtusNwaogu]

Thanks, was a good mini course. Learnt alot 👍

[@favanzzo]

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

[@ClashGamer-u8p]

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

[@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; }

[@sajaljain5919]

how did you get scroll style at 29 min

[@lembocsgo]

I think its because of his browser

[@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.

[@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

[@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!

[@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.

[@moarghostnstuff]

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

[@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

[@sidshehria]

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

[@creativeshorts6028]

Is it responsive

[@erayates310]

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

[@ourvideosite]

Hi Lama, do you create courses on demand?

[@Razes9ooo474lO4]

Great Teacher ....🙏

[@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

[@Krishnash1355]

This is awesome "Just Like That"

[@israelmitolu5365]

Awesome way of teaching!

[@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?

[@laibaasif2208]

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

[@fashionaddaudaipur4023]

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

[@szymon_JD]

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

[@LazyxSD]

Nice video and small doubt instead of hoststinger can i deploy within firebase and will it work same?

[@juanmacias5922]

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

[@aryanchauhan08]

did that camera video call and voice call works?

[@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?

[@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?

[@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?

[@Rahulbabu-hh6dx]

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

[@AkashAhmed-i1x]

Awesome project sir

[@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

[@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

[@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'; }

[@pantelis2002]

Beautiful App

[@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

[@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

[@sdfsfsfd437]

Awesome!!! 💯👍

[@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

[@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...

[@bashardev]

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

[@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..

[@qurann_313]

guys, can i say about this project intermediate project ?

[@simonzhang9245]

Hi, thank you so much for making this tutorial, it is so helpful. I ran into this problem in part of "Sign Up With Email and Password", I follow the video, however, when I try to sign up, it keeps popping out the error message "auth is not defined", I have been trying to fix this problem for a while, did anyone also had this problem? Please help me out.🙏🙏🙏

[@donabiswas6266]

Same I am getting g the same problem. Console points to reference error : Auth not found . Shows problem with const res= createUserwithemailandpassword. How to solve . It . Did u solve it??

[@simonzhang9245]

Yes, try to check your imports, in the video it automatically imports Firebase files, but you might have to manually do it.

[@aryankaushik9373]

same bro

[@aryankaushik9373]

hey i found the solution just import { auth } from "../../lib/firebase" this in Login.jsx

[@RajKumar-q8u7c]

CAN I ADD web RTC in this app to make it a video confrencing feature or video call feature..is it possible..??

[@himage6540]

i am a beginner in react js. can i watch and do this??

[@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 ?

[@microbitprojects7055]

Thanks Lama for this but how do I put multi user chats?

[@godsonftw1973]

I have copied your code from github. But im getting on one line in chat.jsx- import { format } from "timeago.js"; How can I solve it. Can someone please help me??

[@Crux911]

have you installed timeago.js library?

[@ajay.2461]

Hi Lama Dev, many of people around tells, you should do real world projects? What's that mean? Can you make a video on how to write project's description in a effective way to put in resume

[@AvikNayak_]

Real world projects mean software that people will actually use in their day to day life. For example a language learning app like Duolingo or a meeting scheduler app etc.

[@GameVerse215]

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

[@21Mayhem]

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