Chat App using React and Firebase | Realtime Private Chat Application

Рет қаралды 633,440

Күн бұрын

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

Пікірлер: 981

@LamaDev 2 ай бұрын

The new version (2024) of this tutorial is here: kzfaq.info/get/bejne/mtWdp8KE3ZPbhI0.html

@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 21 күн бұрын

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 8 ай бұрын

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.

@Lamadev01_for_help_telgraam_me Жыл бұрын

👆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 KZfaq, it would be amazing if you could slide in Typescript in one of your projects.

@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 6 ай бұрын

are serious right now ? the whole tutorial was shit

@tanvir_rahman__ Жыл бұрын

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

@nathanaelmehari1909 9 ай бұрын

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

@yugandharsarath3197 Жыл бұрын

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

@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

@berrieberrie1555 Жыл бұрын

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

@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

@elyasarkin0991 Жыл бұрын

So understandable! Thanks for your efforts and time.

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

@LmM277 3 ай бұрын

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

@prabhjotarora2740 Жыл бұрын

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

@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

@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

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

@Aaron-pf8cd Жыл бұрын

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

@wealthglitch Жыл бұрын

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

@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

@shoaibqasim6889 Жыл бұрын

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

@herbeysoft Жыл бұрын

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

@moyomadee7 7 ай бұрын

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

@praneethamudunuri9405 7 ай бұрын

Can we do this as major project

@luilekhangaming7242 7 ай бұрын

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

@courageezekiel7251 7 ай бұрын

@@luilekhangaming7242Same here

@IllIIIIIIllll 6 ай бұрын

Bro did you host it?

@moyomadee7 6 ай бұрын

@@IllIIIIIIllll yes i did

@hirunidivyangani9915 Жыл бұрын

Thank you Lama for these amazing tutorials ❤️

@jess241087 Жыл бұрын

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

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

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

@vinaypatil8009 Жыл бұрын

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

@wendybaque9356 Жыл бұрын

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

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

@amoozuu5935 Жыл бұрын

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

@nitexpress7163 Жыл бұрын

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

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

@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

@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

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

@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

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

@talalhamdaoui1067 Жыл бұрын

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

@easonlimyikshen2089 Жыл бұрын

Love the way you talk, chill man

@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 11 ай бұрын

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

@eraycancoban1075 11 ай бұрын

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.

@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 11 ай бұрын

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

@roy-qn5eg 5 ай бұрын

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

@mubarak9264 Жыл бұрын

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

@allendavis9066 Жыл бұрын

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

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

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

@yoyothe_ Жыл бұрын

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

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

@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

@harry_12344 10 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

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

@leoved1073 9 ай бұрын

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

@visiion1998 3 ай бұрын

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

@learnerasif6610 Ай бұрын

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

@nhatbui229 Жыл бұрын

You are my best teacher i have ever seen

@hau2724 6 ай бұрын

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

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

@wishmeheaven Жыл бұрын

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

@laneantunes4059 Жыл бұрын

Awesome tutorial. Thank you!

@amaanullah13 Жыл бұрын

Did you upload your code on Git?

@msalameh01 Жыл бұрын

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

@sharanabasappadhammur9171 Жыл бұрын

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

@jhosefjr17dbz83 Жыл бұрын

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

@criticvlll Жыл бұрын

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

@Lamadev01_for_help_telgraam_me Жыл бұрын

👆Send a direct message for help 🆙 ⬆️

@nargizgasanova6222 Жыл бұрын

wow! Definitely should watch it

@waifucodes 10 ай бұрын

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

@BGOPC Жыл бұрын

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

@tkot7857 7 ай бұрын

thank you sir for the meaningful tutorial

@alucard00mx Жыл бұрын

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

@jebersonaj1324 Жыл бұрын

Hi, This Really Helps Me, Thanks.. How to Enable Video Call Options Over here, Can you make separate tutorials - adding video call options with the same application?

@eribertosantos29 Жыл бұрын

Excelente tutorial, siga así.

@out-of-sight Жыл бұрын

Hello, please keep going to make content like this and a friendly request maybe you can update this project a little bit later. You're doing absolutely well. :)

@KaPaTeJIb6a6o4ek 11 ай бұрын

looks good, useful for newbies

@anasisah2384 Жыл бұрын

Very happy to meet this chanel

@shubhamdas6519 Жыл бұрын

that is really a wonderful..video 😍😍😍

@ucthainguyen289 Жыл бұрын

Thank you master Lama!!!!

@gourabbanik2043 Жыл бұрын

It's looking awesome👍

@vikash.pandey1550 2 ай бұрын

thanks man this video helped me alot

@saifularafatr6745 7 ай бұрын

Really Nice , i wait to part -2

@Arabian_Epileptic Жыл бұрын

Thanks Lama once again

@narutoshadown Жыл бұрын

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

@rogerionascimento1989 Жыл бұрын

Great tutorial 👏👏👏

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

@parassharma7041 Жыл бұрын

Love your videos 😍

@gerardcubaka342 2 ай бұрын

I learned lot of things, thanks

@coder5336 Жыл бұрын

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

@sohaibsoussi9042 Жыл бұрын

I agree

@phaphuynh3584 8 ай бұрын

So helpful! 💙

@OmarFaruk-bz4gw Жыл бұрын

I am form Bangladesh, your best teacher youtube

@learn_Japanese_with_sam Жыл бұрын

Thank you everything sir ji

@ahmadhassan6675 Жыл бұрын

You should definatly create udemy courses. Best teacher on the internet. God Bless You..

@mohammadalbasha2693 Жыл бұрын

Awesome , please make us tutorials with typescript

@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 11 ай бұрын

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

@noone1000_xyz 11 ай бұрын

thanks...it got solved

@AakashYadav-ri1pt 11 ай бұрын

Thanks! ..It worked

@PriyankaBani-tx7xo 11 ай бұрын

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

@ahamedafri6956 11 ай бұрын

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