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

[@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»). Вот такая ошибка вылазит, что делать

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

[@braveitor]

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

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

[@Wtfeeeeeec]

when your to do list project is actually useful when doing some project like social media, e commerce, wow thank you

[@oli-9609]

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

[@MacFly669]

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

[@rockbelleh6237]

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

[@creativeshorts6028]

Is it responsive

[@Soap_js]

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

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

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

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

[@gustavogutkoski]

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

[@avenolchits-o7l]

the best layout i have seen sofar !!!

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

[@mengistu3137]

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

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

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

[@agikedwin8589]

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

[@dalestewart]

Top notch Professional Application👍

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

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

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

[@owoadeadedayo4198]

Lama is the best🎉🎉

[@amirabbasgholami-y6f]

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

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

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

[@happymalyo_]

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

[@zhuochen8793]

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

[@Aryan-oj2vn]

Awesome!....Jaast laayk dhatt!!

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

[@FaselGodbcho-e7w]

Thanks for the comprehensive tutorial

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

[@ClashGamer-u8p]

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

[@JayTheMachine]

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

[@nolep5555]

can you copy the env.example please

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

[@goyalArpan]

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

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

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

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

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

[@israelmitolu5365]

Awesome way of teaching!

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

[@Razes9ooo474lO4]

Great Teacher ....🙏

[@SixtusNwaogu]

Thanks, was a good mini course. Learnt alot 👍

[@cookiee7016]

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

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

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

[@Krishnash1355]

This is awesome "Just Like That"

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

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

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

[@AkashAhmed-i1x]

Awesome project sir

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

[@naveennani6297]

no i think so

[@sidshehria]

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

[@creativeshorts6028]

Is it responsive

[@favanzzo]

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

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

[@sdfsfsfd437]

Awesome!!! 💯👍

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

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

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

[@abdullah19957]

teşekkürler Şafak reis:)

[@aryanchauhan08]

did that camera video call and voice call works?

[@historyaii25]

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?

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

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

[@rohitkhadatkar1881]

did you manage to solve it ?

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

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

[@Harsh_Jambukiya]

Hello,👋 I am from India. When I write "compt," the shortcut is not working. I copied everything you provided in your GitHub file, but it's still not working. How can I solve this? 16:11

[@Sibixpur]

ofcourse an Indian asking silly questions..

[@Harsh_Jambukiya]

@@Sibixpur For your information, the CEOs of some of the world's biggest tech giants are Indian. Never underestimate the power of Indians. 💪😎😎

[@Sibixpur]

@@Harsh_Jambukiya bruh...he's CEO not founder nor the one who developed Google...

[@Harsh_Jambukiya]

@@Sibixpur If you are developer than not given this kind of sily answer bcz CEO is big achievement.

[@Harsh_Jambukiya]

@@Sibixpur If people from other countries trust Indians, they often perform exceptionally well. That's why many major companies have Indian CEOs. Therefore, I don't want to argue with you, but you shouldn't underestimate Indians.

[@Spiderzzzzzzzzzzzz]

Great!

[@Muhammadqodir2010]

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

[@moarghostnstuff]

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

[@pantelis2002]

Beautiful App

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

[@ourvideosite]

Hi Lama, do you create courses on demand?

[@52nevil36]

Alaways great video

[@sajaljain5919]

how did you get scroll style at 29 min

[@lembocsgo]

I think its because of his browser

[@szymon_JD]

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

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

[@erayates310]

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

[@RanjeetKumar-n5y6v]

When i am trying to connect my Firebase Storage , it shows me to upgrade my account what should i do ?

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

[@naxgat]

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

[@MusicVibeCorner]

I got the site setup but one issue: my user database is structured with "Username" instead of "username" how do i change your code to fit this change?

[@nolep5555]

can you copy the example of env please?\

[@aayushgupta069]

I have a stupid question. Can we use the free tier for firebase? Does it require a credit card? I am new to cloud so apologies if I am asking stupid questions.

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

[@TehranBayram]

you are the king man

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

[@Rahulbabu-hh6dx]

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

[@iqbalbhatti49]

Sir! Can you make same tutorial using MERN Stack?

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

[@martinwiytiszen8625]

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

[@Motion1248]

2:03:04 FetchUserInfo is not a function Gives this error

[@YourName-ws6mc]

did u solve the problem ?

[@Motion1248]

@@YourName-ws6mcI forgot what I did xD

[@fashionaddaudaipur4023]

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

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

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