Chat App using React and Firebase | Realtime Private Chat Application

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

[@BlessedTechie]

Thanks so much

[@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 🆙 ⬆️

[@BenjaminEmm]

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

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

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

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

[@dj_ovosh]

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 ?

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

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

[@out-of-sight]

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

[@WildHowlYT]

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

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

[@Chillycloth]

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

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

[@tanvir_rahman__]

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

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

[@yugandharsarath3197]

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

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

[@sumitnegi7936]

bhai kese intall kiya kux smj nhi arha help krdo

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

[@nhatbui229]

You are my best teacher i have ever seen

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

[@Yuvalspiegel]

Thanks!

[@cchelseacxx]

👆Send a direct message for help 🆙 ⬆️ .

[@elyasarkin0991]

So understandable! Thanks for your efforts and time.

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

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

[@amoozuu5935]

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

[@prabhjotarora2740]

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

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

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

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

[@Aaron-pf8cd]

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

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

[@easonlimyikshen2089]

Love the way you talk, chill man

[@luvchaudhary5858]

Those having problem with Firestore users DB is not creating just - Go Rules in Firestore Database and change: allow read, write: if true; Go Rules in Storage and change: allow read, write: if true;

[@oriolripalta6943]

Thank you! It worked. Do you know why this happens? And how can you use it with false? I assume it has to do with third-party protection, right?

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

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

[@viniciusm.m.7822]

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

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

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

[@herbeysoft]

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

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

[@berrieberrie1555]

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

[@vinaypatil8009]

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

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

[@aryan_bhattarai]

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

[@noone1000_xyz]

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

[@roy-qn5eg]

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

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

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

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

[@allendavis9066]

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

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

[@hirunidivyangani9915]

Thank you Lama for these amazing tutorials ❤️

[@towatch]

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

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

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

[@jess241087]

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

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

[@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 🆙 ⬆️

[@statusmode4483]

This video is not working as of now Please don't start the code otherwise you will regreat

[@nitexpress7163]

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

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

[@yoyothe_]

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

[@wendybaque9356]

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

[@OmarFaruk-bz4gw]

I am form Bangladesh, your best teacher youtube

[@shoaibqasim6889]

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

[@WillSmith-qt7me]

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

[@talalhamdaoui1067]

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

[@KaPaTeJIb6a6o4ek]

looks good, useful for newbies

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

[@msalameh01]

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

[@ucthainguyen289]

Thank you master Lama!!!!

[@nargizgasanova6222]

wow! Definitely should watch it

[@abdooowd]

Man you're a legend, you won my subscription!

[@syedwajidshah3314]

do you complete the project i need some help

[@abdooowd]

@@syedwajidshah3314 I gave up half way, sorry buddy... Maybe you could ask ChatGPT?

[@sharanabasappadhammur9171]

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

[@anasisah2384]

Very happy to meet this chanel

[@shubhamdas6519]

that is really a wonderful..video 😍😍😍

[@wishmeheaven]

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

[@saifularafatr6745]

Really Nice , i wait to part -2

[@laneantunes4059]

Awesome tutorial. Thank you!

[@amaanullah13]

Did you upload your code on Git?

[@jhosefjr17dbz83]

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

[@brunofelipe5380]

if u are getting problem with "Firebase Storage: object XXX dont exist" and after check your storage the object is there, you need, on input component, in uploadTas.on complete the args, like: $$ uploadTask.on( 'state_changed', (snapshot) => {}, $$ (error) => { $$ //TODO:Handle Error $$ } [...] after that u need complete the code like the Lama dev do. Well, i have trouble uploading images, and not with just text, that solve my problem.

[@anudeep9683]

Hey i had issues with search saying user not found any help?

[@noone1000_xyz]

thanks...it got solved

[@AakashYadav-ri1pt]

Thanks! ..It worked

[@PriyankaBani-tx7xo]

Ur a saviour I have been stuck in this past 1day thanqq😭❤️‍🩹

[@thewellwisher6956]

i did't get that can anyone pls tell exactly how to do that or share your github repo

[@hau2724]

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

[@haitruongthanh696]

Cảm ơn bạn!

[@coder5336]

never seen such a good firebase 9 tutorial man you are the best

[@sohaibsoussi9042]

I agree

[@waifucodes]

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

[@Arabian_Abomination]

Thanks Lama once again

[@utibeabasiukobo4381]

I have a problem at timestamp 1:02:00 when you were adding the details to the firestore database

[@rhl_ai]

same bro...did you found any solution. Edit: i found the solution, lama missed importing db to register.jsx add " import { auth, db, storage } from "../firebase" '" on the top of your register.jsx.

[@utibeabasiukobo4381]

@@rhl_ai yeah thats true

[@utibeabasiukobo4381]

what about at the end of the video...could you receive messages?

[@rhl_ai]

@@utibeabasiukobo4381 i am yet to complete the tutorial bro.

[@rahulsingh4-yearb.tech.civ870]

@@rhl_ai its still not working bro

[@gourabbanik2043]

It's looking awesome👍

[@sanyamsaini081]

@1:02:17 , when i click on sign up, the span tag containing "somthing went wrong " is displayed and the data is not being stored in the firestore database, however authentication and storage are working fine, what wrong am i doing? i also tried deleting the project and setted up from scratch..

[@noone1000_xyz]

did you find the solution ????? if yes please share with us....please

[@leoved1073]

@@noone1000_xyz Did you find the solution then please help I am stuck on the same problem since last 2 days....I see the user created at authentication and image at storage section but there is noting in the cloud firestore...

[@spanningtreee]

now if someone is facing this issue please check the rules in firestore cloud and change it to this allow read, write: if true;

[@rogerionascimento1989]

Great tutorial 👏👏👏

[@learn_Japanese_with_sam]

Happy teacher day sir 💕🌹💕🌹💕

[@tkot7857]

thank you sir for the meaningful tutorial

[@mubarak9264]

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

[@shivpratapsingh7299]

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?

[@devadathans465]

hey did u fixed that? bcz I also can't update the userChats

[@syedwajidshah3314]

did you fix that? i have this issue

[@syedwajidshah3314]

@@devadathans465 hello i am unable to create chats can you help me?

[@syedwajidshah3314]

@pk did you resolve the issue i am unable to create the chats can you help?

[@aryan_bhattarai]

@@syedwajidshah3314 hello... i m also stuck on the same problem. i am unable to create the chats collection and i cant even figure out why... if u have found a solution please share. thanks

[@phaphuynh3584]

So helpful! 💙

[@ShindoSensei]

At 2:01:21, notice when he types in an input the userChats names on the left sidebar (i.e. John and Adam) re-orders momentarily before snapping back to the correct sorted arrangement by date. I've been trying to debug this for the longest time, any idea how to prevent it?

[@luilekhangaming7242]

Having Problem with Creating Firestore Database (59:37) . When I'm Trying to Create Database they showing "This project is set up to use Cloud Firestore in Datastore mode. This mode can only be accessed from the Google Cloud Console" ----- PLEASE LET me Know How to SOLVE this and how can i create firebase database now?? i'm in the middle of the Project!! Urgent Need Help for this Situation!

[@karthiknayak4381]

Same situation did you got the solution I am also stucked in between😢

[@crazyboyrish2577]

​@@karthiknayak4381samee did you get the solution

[@Sapien617]

i got the same issue and resolved.. i created another firebase project and i created firestore before creating other services

[@crazyboyrish2577]

@@Sapien617 how can you explain a bit

[@Sapien617]

@@crazyboyrish2577i have created a new firebase project then instead of activating authentication first.. i created a firestore database first...try that if it is working then you can create other services and just change the configuration in your code

[@entertainer-xyz7562]

Hi lama, i am getting issue at 1:33:14 i am unable to store userInfo inside userChats

[@CodeAndCoffeeWithAnu]

Did u got the solution?

[@vikash.pandey1550]

thanks man this video helped me alot

[@syedwajidshah3314]

Thank you lama dev

[@parassharma7041]

Love your videos 😍

[@gerardcubaka342]

I learned lot of things, thanks

[@eribertosantos29]

Excelente tutorial, siga así.