Chat App using React and Firebase | Realtime Private Chat Application

The New Version (2024) of this Tutorial is Here: • React Chat App Full Tu...
Get Hostinger Discount: hostinger.com/lamadev Coupon Code: LAMADEV
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code: github.com/safak/youtube2022/...
Join Lama Dev groups
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
Twitter: / lamawebdev
00:00 Introduction
02:53 Installation
05:04 React Login and Register Page Design
16:45 React Chat App Design
45:40 Sass Responsive Design with Mixin
48:58 React Firebase v9 Authentication Tutorial (Login - Register)
01:12:18 React Router Dom Protected Route Tutorial
01:14:08 React Firebase Login with Email and Password
01:18:31 Firebase Chat App: Search User
01:23:33 Firebase Chat App Database Structure
01:34:22 Fetch Chat Conversations
01:39:16 React Firebase How to Fetch Private Chat Messages
01:49:56 React Firebase How to Send a Real-time Chat Message
02:01:17 React How to Scroll to the Latest Message
02:02:24 Deploying App
02:04:49 Outro

[@LamaDev]

The new version (2024) of this tutorial is here: kzbin.info/www/bejne/mqDQpZKJrZKqirs

[@nekibus]

Selam Şafak. Harika içerik için teşekürler. Bu VS code kısayollarını ve trick lerini anlatan bir video hazırlarsan süper olur.

[@PravallikaSanapala]

Type does not match the expected instance. Did you pass a reference from a different Firestore SDK? FirebaseError: Type does not match the expected instance. Did you pass a reference from a different Firestore SDK? While i am doing this project i got this error. Can anyone solve this issue?

[@BenjaminEmm]

I love these all being a single video. Much easier to follow along with!

[@out-of-sight]

This is an amazing project. I just can't wait for the next projects like this. Thank you.

[@botdevv]

Wow, I have to say, those videos are absolutely amazing! The voice tone and delivery are so impressive. It's really great when start by showing the result and then gradually explain how to achieve it. Very cool! Thank you!

[@tenc6491]

Wowwww! This is your 2nd project tutorial and I am in love with your work and explanations. It's really informative and easy to comprehend. Thanks for sharing it with us. Love it.

[@Chillycloth]

Wow, beautiful. Smooth process, clear and concise steps. You make it look like effortless perfection. Watching you is like watching Michael Jordan

[@syedmarufali1612]

It took me two hours for the first twenty minutes. You are really great, sir you just built this app so fast and smoothly.

[@cchelseacxx]

👆Send a direct message for help 🆙 ⬆️

[@sudeep71195]

Thanks for this tutorial. Helped me a lot in learning how to work with Firebase, and also brushed up a lot of things in React.

[@raymondmichael4987]

I’ll save this as my reference to hostinger, I plan to join the gang very soon and you’re explaining it super awesomely.

[@christianferrario]

That's undoubtedly the best and most helpful React channel on KZbin, it would be amazing if you could slide in Typescript in one of your projects.

[@yugandharsarath3197]

Really Nice 🤩, We want Part-2 with more advanced additional features.Thank you.

[@hippolyteavoce1356]

You are absolutely the best teacher I ever meet on social media. I can give much more like and views for your videos if youtube policy allows it

[@tanvir_rahman__]

Just finished watching this tutorial. really loved it!🔥🔥

[@LamaDev]

Hi friends :) Thanks for watching. Don't forget to check Hostinger discounts: hostinger.com/lamadev

[@stanleyjoseph4370]

Please can you make a tutorial on create a buying and selling crypto website

[@dogukanvaris7224]

How can we use Hoc professionally in React? Where should we use it? Can you make a video informing us about it?

[@amanchauhan5530]

Hey I am going to start this tutorial. Can you help me out with one question. "Is there need to buy any service or do I need to spend any money to make this project work. or I can just use free services of firebase ?"

[@amitsadaphal]

I have used your discount code we have get only 2% discount in VPS Server.

[@BGOPC]

@@amanchauhan5530 you can just make that. but don't host that. Or find a free hosing server

[@thahsinasofta5024]

Amazing tutorial!!!! You make everything so simple and easy to understand. Thanks a lot ,plz keep making such tutorials its literally very helpful.

[@dojokaisen3714]

are serious right now ? the whole tutorial was shit

[@prabhjotarora2740]

I wonder why so less views for this video man, This guy deserves a lot more views, that's such an amazing tutorial!

[@berrieberrie1555]

Thank you so much for the tutorial, it's so fun following throughout this chapter. ^^ wishing you well

[@WildHowlYT]

Wow, Firebase and React is a great combo for sure 💯

[@elyasarkin0991]

So understandable! Thanks for your efforts and time.

[@nathanaelmehari1909]

Great work man, Even while doing another project, your video helped me with firebase Storage. Although I have read the doc it was a bit confusing to understand but your video showed me a practical example

[@Aaron-pf8cd]

Currently finishing the e-commerce project! Now you drop this liquid gold during the three day weekend!!! Yeeeeees!!

[@kantyDarius]

Lamadev is one of the most complete channels about web development, and so under rated to... Lamadev deserves at least 1 million subs.

[@jhonnyjutsu]

hello bro, can you recommend me another channel like lamadev?

[@kunal_g]

@@jhonnyjutsu sunny sangha

[@wimdenherder]

This is really the best tutorial out there, thanks so much!! Supercool project and clear explanations. Now I'm using this as my own chat-app and I've added bots, autoplayed preloaded video, translated and spoken (text to speech) messages, a profile page and funny sounds. There's no better and more entertaining way to learn coding!

[@swastikpatro6436]

Can you send the link to your app?

[@tomioka1331]

please, send the link to your app, broo

[@eldaridrizovic3295]

hello, how fix 01:33:12 ?

[@sivaprasad7153]

@@eldaridrizovic3295 hello, did u figure it out?

[@shubhamsharma0099]

Can you provide the link to use your app ?

[@jess241087]

Your work is amazing ! Thank you so much for your tutorial !

[@miw879]

thank you soo much putting efforts into css aswell this is much needed for alot of us good with js and react but lack pure css skills thanks alot ❤❤

[@rishavsharma4206]

You are amazing, Safak ⭐ You come up with Phenomenal projects which really teaches us the nitty-gritty of real world applications. Thanks you for putting in the effort. We all love your work :)

[@Avinash_0.178]

can u help me broo .. when i can find user they can big image and also not send the image plzz me broo

[@hirunidivyangani9915]

Thank you Lama for these amazing tutorials ❤️

[@Steve-dev]

My native lan is tamil, so i struggle to learn English tutorials but this video very easy to understand, i think Lama dev bro🤩 is - THE BEST devaloper AND tutor in WORLD🌎,

[@mohamedabdulla8097]

Sept-5 is celebrated as teacher's day in India. I learned lot from you . You are one of my fav teacher. Thankyou . Wish you a happy teachers day ✨

[@m18web92]

Very good class, it would be even better if it had a form of video call, then it would be even better, congratulations, your teaching is really amazing, thank you

[@herbeysoft]

Exactly what i need right now!! love you man & thanks for your doings

[@easonlimyikshen2089]

Love the way you talk, chill man

[@moyomadee7]

Took me weeks to complete this project but it’s definitely worth it! Thanks a lot Larma!🎉❤

[@praneethamudunuri9405]

Can we do this as major project

[@luilekhangaming7242]

Hello there i am stuck (1:00:00) my firebase/firestore somehow not working may i know how did you done that??

[@courageezekiel7251]

@@luilekhangaming7242Same here

[@IllIIIIIIllll]

Bro did you host it?

[@moyomadee7]

@@IllIIIIIIllll yes i did

[@amoozuu5935]

Sir your tutorial is my life ❤️❤️❤️

[@vinaypatil8009]

Here's come legend with legendary project video with explanation. Dope 😎

[@wawwdadadad]

i just came back to Web Dev again after 2 years of abandoning my progress (i was full stack web dev using React/Laravel+Mysql), imagine i literally forgot everything i have ever studied for, but advantage i have is that i know path i need to take to study it again so thanks you for this video learn a lot CSS ideas too btw..

[@shrirambaskaran8870]

Loved the way you explain things smoothly. Although I'm new into this React, so need to completely understand few hooks in order to be in compatible with your explanation and projects. I'm sure your videos gona be gamechanger for me in React in future. . . . NOTE- For Beginner's In react try to first understand all topics of react basics and give it a try in small react basic projects and then when you will come to this page , you will surely excel. (from experience i'm saying)

[@firstandlastgaming2985]

How to enable datastore mode in firebase

[@kaustubhpatil651]

@@firstandlastgaming2985 im having problem in firestore database, its not making collections and documents

[@garimagautam8146]

I've got an error in register, whenever i do register with new id it shows that 'name' is not found and in the firebase i didn't get any userchats row. Can you please help me in solving the error?

[@andre.godinez]

Note: If you get permission errors for writing to your collection you need to change to 'set allow: read, write: if request.auth != null' in firestore rules

[@bjjiscoolman]

Thank you! This fixed my 403 error

[@laneantunes4059]

I had this problem, but now it's fixed :) . Thank youu

[@azeezshah]

Thanks a lot Andre! How did you figure this out?

[@andre.godinez]

@@azeezshah Firebase docs 🫰

[@harshitsuyal8285]

Thankyou so mutch ❤

[@shoaibqasim6889]

Lama you are great , superb and amazing person. i really follow your toturials Please keep continue to do the same work

[@PenguinRomeo]

Thank you sensei. It takes a lot of time to write this with ts & redux, but you taught me how to work with firebase backend. Thank you very much

[@devanshkumar7723]

hey man does your chat app work properly?

[@rog0079]

Hi, great video, a request, can you please implement the timestamp feature in chat screen, just like whatsApp, for example, grouping of messages under a particular date, like these messages belongs to yesterday, today, etc etc...

[@matysw]

he literally showed you everything needed bro 😁 watch again and try to implement yourself :) i promise, you will learn 10x more when you try yourself

[@isaacqadri]

Hi Lama dev, i really appreciate your effort. Yo projects sounds great, but i have a suggestion could you split these into multiple videos. maybe that's gonna make it easier for me and other people to follow along and practice.

[@cafelutsa_]

this being a single part video is the best thing about it. splitting it is a no-go

[@allendavis9066]

Thank you Lama Dev. You are the best of the best!

[@talalhamdaoui1067]

I m really thankful for this so interesting tutorial. I learnt so many things. Thanks again.

[@RAGHI.ABDESSAMAD]

Lama brother Thank you so much for your content If it's possible we need projects with react-typescript and tailwind or react-typescript-redux tailwind For mobile side we want to learn react-native

[@jmo97]

Fix for error Uncaught TypeError: Cannot convert undefined or null to object --> {chats?.length > 0 && Object.entries(chats)?.sort((a,b)=>b[1].date - a[1].date).map((chat) => .......

[@viniciusm.m.7822]

Love you, man! Forte abraço do Brasil!!!! Thanks a lot! God bless!

[@huzaifakhan6247]

When you created the collection "chats" in firebase what did you write in "ID" field which is required? I'm stuck here, Can anyone help? Thanks

[@aryanbhattarai6188]

same problem here... did u find a solution? please share. thanks

[@noone1000_xyz]

@@aryanbhattarai6188 did u find any solution??? i am not also able to sove this

[@roy-qn5eg]

@@aryanbhattarai6188 just create it with autoID bro after adding first doc through our frontend del that document u created with autoID

[@BenjaminEmm]

Thank you for this tutorial! It was very easy to follow and the finished app looks awesome. I've finished the app now but there seems to be an issue with firebase when trying to send images via the chat. Could you help with the "Firebase storage object does not exist" error? This occurs when you upload an image to the chat and click send.

[@FirstHighFlight]

Same error here

[@BenjaminEmm]

@@FirstHighFlight If you ever figure it out please update me!

[@FirstHighFlight]

@@BenjaminEmm Okay, you too :)

[@NoIngNames]

Have you ever found the solution? I'm having this problem as well.

[@BenjaminEmm]

@@NoIngNames not yet sadly.

[@wendybaque9356]

Thank you very muchfor this tutorial ! I'm learning code and is much easier to follow your code and explanations !

[@nitexpress7163]

Thank you very much. Just awesome tutorial. You are the best teacher. Love from Bangladesh!

[@germantoenglish898]

54:00 if you get an error at this point while trying to create a new user...make sure your password is at least 6 characters long. It kept giving a 404 error in the console and it took me ages to find this solution. 🙄

[@avantikapandey5507]

Thank you soo mush was trying to solve this error but couldn't figure out what i was doing wrong!!

[@atanasjakovov4293]

omg dude wtf thanks i was about to give up

[@noone1000_xyz]

Thanks a lot buddy....you saved me....

[@eraycancoban1075]

Dude thank you soo much i spent 1 hour for this error

[@WillSmith-qt7me]

Thanks, friend. I asked for such a build in your previous videos comments.

[@mubarak9264]

It's awesome to see how fast and comfortable you are with vs code ide. please make a video on that.

[@Paul-tw4un]

I started having issues half way through at the 1hr mark. There seems to be an issue with registering, sometimes it would work but most times it does not work. I tried copying your source file by file while keeping my firebase config. Uncaught (in promise) FirebaseError: Firebase Storage: Object 'paul' does not exist. (storage/object-not-found) Users show up in storage but not in Firestore database I don't know how it works flawlessly in the video but I'm experiencing these issues? Is it an issue with the async function?

[@juliusoh]

i'm having similar problem

[@paulrodriguez3198]

I have same issue

[@paulrodriguez3198]

So, I managed to get over that issue. Try following: in firebase.js line 19 export const db = getFirestore(app); Register.jsx line 24 const storageRef = ref(storage,`${displayName}`); same line 41 addDoc(collection(db, "users"), { ...here object }

[@paulrodriguez3198]

also, after first unsuccesful attempt , eventually collection users will appear - very first time it myight take time. After users collection appears - there shall be no problems

[@LamaDev]

Hi, I updated the registration page. You can check it out in the Github repository.

[@juliusoh]

Your method of firebase database is not working for user registration

[@amaanullah13]

How did you fix it then?

[@AniketSharma-ct5fv]

Yes it is showing error

[@AniketSharma-ct5fv]

How to fic it @J ulius Oh

[@nhatbui229]

You are my best teacher i have ever seen

[@laneantunes4059]

Awesome tutorial. Thank you!

[@amaanullah13]

Did you upload your code on Git?

[@harry_12344]

Hi, in the search file @1:33:33, i am able to create the collection "chats", but im unable to update the data in userChats. is there anything i need to change in the rules? Could anyone help me out please?

[@cricketwala937]

you're using getDoc to check if a document exists, but the getDoc function doesn't return null if the document doesn't exist. Instead, it throws an error if the document is not found. This is why your if (!res) condition never evaluates to true. To fix this issue, you should use the .exists() method with "res" object to check if the document exists. you can write like this " if (!res.exists()) "

[@entertainer-xyz7562]

​​@@cricketwala937i am also facing same issues,I tried same as you have written above but it is not working

[@leoved1073]

@@entertainer-xyz7562 did you solve the issue??

[@visiion1998]

hey bro are you facing a currentUser consoles null in app.js ???????????

[@learnerasif6610]

Brother iam also facing this error.. Did you solve this problem?

[@Arabian_Abomination]

Thanks Lama once again

[@anoshmatti]

Appreciate the tutorial, took me awhile but best React Project I've completed

[@tenybits5950]

can you provide github link

[@nastikx_luffy]

Is it working properly?

[@nastikx_luffy]

Can we use it as final year project?

[@AngelodeOliveiraMix]

Guys I'm stuck on 59mn with the FireStore, I mean, I write everythig as the same but It trows the next error in console, "Failed to load resource: the server responded with a status of 400 ()". I'm looking but I can't find the mistake, I did twice this part and still doing the same, I even delete and made a new project in Firebase, but cant solve it. Help!

[@christopher4631]

I had the same issue and for me it was bc of a typo on the await setDoc line

[@shubhamsharma0099]

did you created the database in firestore website and start it in test mode ?

[@richardtbohnen5070]

Awful everything. Clearly never read React or Javascript docs. Wrong error handling, as shown by the fact that this app has bugs. Some of the messiest and misuse of code syntax I have ever seen. html is all wrong and would break at the slightest change anywhere in the js or in the css which is terrible even for a tiny demo project like this. Also, the scss structure is appalling, may as well spam regular css selectors and it would still be better than that abomination. Cannot imagine how horrendous an app like this with the required extras to have it actually running in production would be. Even for a tutorial or small showcase this is awful everything.

[@hau2724]

Thank you so much . I learned a lot of useful this tutorial video !!

[@ucthainguyen289]

Thank you master Lama!!!!

[@yoyothe_]

"Hello my friends..." 😊Safak doing what he does best. Your projects are always amazing and insightful.

[@nargizgasanova6222]

wow! Definitely should watch it

[@msalameh01]

you are the best as usual, Many thanks. 👏👍

[@phaphuynh3584]

So helpful! 💙

[@sharanabasappadhammur9171]

hat's off to you man👏,thats amazing 😍

[@wishmeheaven]

Adding a feature of "send live location" will be awesome. I mean... Mind blowing.

[@rogerionascimento1989]

Great tutorial 👏👏👏

[@KaPaTeJIb6a6o4ek]

looks good, useful for newbies

[@waifucodes]

thank you for this amazing tutorial sir!!!!!

[@parassharma7041]

Love your videos 😍

[@jhosefjr17dbz83]

It's amazing how you help us to grow up :3

[@anasisah2384]

Very happy to meet this chanel

[@leimengdeK]

love this video!

[@gourabbanik2043]

It's looking awesome👍

[@tkot7857]

thank you sir for the meaningful tutorial

[@criticvlll]

I can't say that I understood 100% of the code, but I definitely learned new stuff.

[@cchelseacxx]

👆Send a direct message for help 🆙 ⬆️

[@saifularafatr6745]

Really Nice , i wait to part -2

[@syedwajidshah3314]

Thank you lama dev

[@vikash.pandey1550]

thanks man this video helped me alot

[@eribertosantos29]

Excelente tutorial, siga así.

[@deepanshujain1466]

Thanks for this.

[@esrasumer9894]

Thank you for video.

[@liorlivyatan]

Very nice and amazing work! I have a question - is there a way to split the left side and the right side of the application, such that when a user clicks on specific chat - this particular chat BulkOperationBase, instead of two windows sude by side?

[@gerardcubaka342]

I learned lot of things, thanks

[@danielmagar5196]

Best teacher ever...

[@andri21]

Amazing dude

[@shubhamdas6519]

that is really a wonderful..video 😍😍😍

[@testme4495]

Great man

[@ShubhamSingh-gk8vp]

let's gooo 🥳

[@alucard00mx]

Muchas gracias mi buen, en verdad con la guía que pusiste me salvaste la vida , saludos !!!!

[@elvinnadirli8661]

Thanks for this video 👍👍👍

[@learn_Japanese_with_sam]

Thank you everything sir ji

[@narutoshadown]

I LOVE YOUR WORK, IM YOUR BIG FAN BRO... !!!

[@adebisisheriff159]

Always the best

[@BGOPC]

Amazing. Please add pt2. Like add VC. or add profile description or bio Or like add blocking someone