Build A Chat App With React And Firebase v9

[@gromozekarpg]

This guy does not have enough views and recognition… randomly found your channel and happy. Awesome tutorials & easy to follow. Keep up the good work & thanks again :)

[@codecommerce]

Thank you so much my friend! 🙏

[@sahilhussain9022]

For all those people asking how to fix scroll issue coming up when there's multiple messaages, i recommend do following, 1. open up sendMessage component, 2. in Style - > form -> add this ( position: sticky ) this should solve issue hopefully.

[@techsammy9772]

@TazzLife didn't work for me

[@techsammy9772]

@TazzLife can you send me your exact form style

[@klnm1122]

Mine working by using overflow-auto in the (in App.js)

[@sggames9990]

although some of the function you are using not working for me but you saved my life!!

[@codveteran1337]

Found your channel at the perfect time! Currently learning React/Next and the tutorials have been great, learnt tailwind aswell from you. Keep up the good videos!

[@elconrel9665]

Thanks for the video, it will be great to see how to create an e-shop to understand how to add/delete items to the basket, etc.

[@nukeguytv]

Just afew months ago. I started watching your stuff (learned alot BTW). Your channel was around 1.4k, and I commented that "it will grow like a wild fire" , and here it is. I'll keep learning from you mate, keep commenting and supporting. Million follower to come. Hang in there bro.. :) keep this flame burnin.

[@cutlerwhitely2269]

These tutorials are incredible; thanks for explaining the purpose of why you're doing everything as you go through! That's a HUGE lifesaver, otherwise I'd never learn

[@codecommerce]

Thank you so much dude!

[@farhad.hossain]

amazing tutorial i seen. i really just fall in love with your tutorial of making react project

[@blazerdork3497]

Another great-tutoring video! Also Cheers for the 10k man, you really deserved it!

[@eshw23]

These tutorials have been nothing but a life saver Clint! If you can, it would be awesome if you can make a cool project to with Node js soon.

[@developedbyjs]

Please continue making videos 😀 We come to your channel because you have best projects!

[@codecommerce]

You’re awesome Dude!! Thank you!

[@developedbyjs]

@@codecommerce 😀

[@ronananderson]

Incredible . Very clear and concise. None of that low coomer energy many instructors seem to suffer from.

[@codecommerce]

Thank you my friend!

[@dennisshakava2216]

I really love how you teach...i actually had to learn tailwind through you..thanks

[@codecommerce]

Dude that’s awesome!

[@johannes1498]

thanks so much for this, just finished it and at around 40 min it got pretty hard, but still so much good info and new things

[@crvenioklop1217]

just wanna say to you:you are amazing,i am glad to find this chanel.Wish you luck and 1 M subs,you deserve much more subs and followers,good luck bro,keep going,you are great.

[@codecommerce]

Thank you so much dude!

[@er.skelafahmed]

You are doing great job. Clear and simple, helps to understand easily.

[@codecommerce]

Thanks!

[@m__link6499]

as usual, always awesome....don't stop dude...

[@chiraglal4938]

you should take care of the scroll, if there are a lot of messages the chat is coming out of the whole chat app div

[@hanzmartinbuot868]

The best teacher!

[@muktarsadiq2005]

I just finished this. tutorial and all I can say is what an amazing video thank you very much👍🏾 also {scroll down} doesn't work

[@WillSmith-qt7me]

Great Firebase chat tutorial. Thanks.

[@BathingAfrican]

i love how u style lol ima really have to start writing tailwind like that

[@codecommerce]

Thanks Dave!

[@cnssanjay9691]

Thank you so much for sharing you great knowledge with us we really appreciate your wok it help's us a lot, thank you for all of it

[@codecommerce]

Thank you sir!

[@devnautica]

Our bro is back with more awesome knowledge

[@codecommerce]

HAHA!! Thank you my Dude!

[@Rocktechnoify]

Great video, the only thing I would recommend is explaining more about what you are doing through the video. Some segments feel a bit rushed and leave the viewer a bit confused about certain concepts of React :)

[@codecommerce]

Thank you Sorraz. I’ll have to slow it down.

[@SacredScrolls786]

Thanks to the algorithm...I reached at the right place❤️✅

[@oleksandryakob7600]

You've realyy helped me with this tutorial, thank u very much!)

[@leonardadrian1173]

great tutorial help me a lot with my self-taught

[@yusufaltundal3482]

Really helpful. Thank you!

[@josephomotade864]

Amazing bro, this is another amazing tutorial.

[@codecommerce]

Thank you so much dude!

[@SuperShivammm]

Great tutorial with too the point explanation. Thanks

[@codecommerce]

Thank you!

[@sahilarora2918]

so good!! 🙌🙌

[@shivammaurya1393]

Thank u sir for such wonderful free videos

[@julialee690]

Yessss I’m so excited about this

[@codecommerce]

YESS Thank you Julia!

[@jackkay5011]

Great video man, honestly you have connected a lot of dots in react for me and tailwind. You mentioned adding the firebase api code to a .env file, do you have any past videos where you even over how to do this?

[@АлексейФилимонов-ф6ы]

Thank you! Very Interesting project!

[@codecommerce]

Thank you too!

[@fred02495]

Love your videos, i learn a lot watching them! Do you have a video that shows how to deploy a firebase app like this one successfully?

[@codecommerce]

Yes I sure do! You can search on some of my Firebase builds :)

[@ogulcandogan8792]

Thank'u for this tutorial

[@codecommerce]

Thank you my friend!

[@Ákos-m4o]

thank you, it was awsome!

[@codecommerce]

Glad you liked it!

[@UsedYourName]

lol thanks for changing how i write tailwind

[@mrwhispersofficial]

Wow nice. So for each chat we create documents, can we make a subcollection which is an array and store all messages there is it possible ?

[@tis7862]

thank you !! your vid came in time and it'll be completely amazing if u could do video calls

[@codecommerce]

Thank you tis!

[@bayarsurenbayaraa2140]

I like it very much, thank you

[@frankebuka2693]

Thank you for the great video. Please if you can still add group chat and send request before chatting a user, i will appreciate so much.

[@bobdpa]

Awesome video Clint! Any opinion on using vite? Thanks!

[@codecommerce]

Thank you Bob. To be honest I don’t have any experience with vite. It is on my list to check out though. Do you have any thoughts on it?

[@bobdpa]

@@codecommerce I definitely like the quick boot up and hot reload. Great for developer experience!

[@codecommerce]

@@bobdpa That sounds nice. I've heard its incredibly fast!

[@ebraraltunkaynak6438]

you are best man , thank u

[@codecommerce]

You’re awesome dude!

[@christopheroche6103]

You are awesome😇

[@avagsargsyan404]

I really wish that the autoimport of your VScode will work some day, thanks for great content ! 😅

[@codecommerce]

Maybe one day!

[@gatti311]

Thank you a lot for this, could you sometimes explain a little bit more what some stuff exactly do in future videos?

[@codecommerce]

Absolutely dude. I’ll work on that. Thank you

[@SesTonuu]

Thank you brother

[@lalagisaa]

Glad, i found ur channel 😂

[@codecommerce]

Welcome my friend!

[@basitkhan3853]

Thanks man 👍

[@codecommerce]

Thank you sir!

[@developedbyjs]

Thank you!

[@codecommerce]

You guys are awesome!

[@nabinsaud4688]

Really cool

[@codecommerce]

Thank you Nabin

[@elitevirgo]

Thanks for this great tutorial! I am just facing one problem. I tried to deploy this project but when I click on the "sign in with google" button it is not functional. Can you help me with this?

[@markokraemer5939]

Getting value out of this :)

[@codecommerce]

Yes! Thanks Marko!

[@sonamohialdin3376]

Awesome

[@kumariranjanayadav2799]

Plz can u make video on full fledged e-commerce websites?

[@sensivityable]

Thanks! What is your vs code theme name?

[@lakshyanautiyal383]

kindly make a benginner project that includes Redux toolkit, API handling. This will help us to get job and also to use it for production

[@GON95ful]

What do you think about Vite instead of create react app?

[@khandoor7228]

awesome thanks

[@codecommerce]

You bet man!

[@muktarsadiq2005]

good day, looks like an amazing project, I wanted to know if it is mobile responsive ?

[@codecommerce]

Yes it is responsive :)

[@thecno]

hey bro, I am very new on react, on the minute 16:44 you mention to hide the keys on ENV file, do you have any example of how to do this?

[@AlexSmith-ms9xb]

You have a very good quality content. I like how you structure the information and how you explain everything so that it is very clear. Your tutorials are very helpful. Can you please make a video showing how to add a user's username to the navbar after successfully logging in using signInWithEmailAndPassword from Firebase? Or some kind of greeting to the user? When logging with Google the displayName contains the user name, however when logging with email and password, the displayName is null. I've been trying to do this for a while and I can't quite succeed. Maybe you can demystify this for me and your other beginners followers. Thanks!

[@codecommerce]

Absolutely! I believe a couple of my Firebase videos have this. The “user info” is available once you authenticate. :)

[@KodyWright-od2tb]

Can we get some NextJS and Firebase with a little Auth and CRUD on the side my brother 😎🧑🏾‍💻

[@codecommerce]

Haha yah dude!!

[@KodyWright-od2tb]

@@codecommerce Man you'd be a straight boss to come through with that. Your tutorials are definitely a game changer. I'm sending everyone to your channel.

[@ferdbugs8170]

I really love coding along with you. Do you have a discord? You're a great programmer and an even better teacher.

[@TZfitness]

genius!

[@codecommerce]

What's up big dog!!!! 💪💪💪

[@hesammovahed420]

Great ! I have built an exchange like yours. But when the page is refreshed, all css will be deleted! Why?

[@codecommerce]

On your chat app the css is deleted when you refresh? Not sure what is going on there- be sure to check my source code on gh.

[@adelinrapcore]

I tried top deploy it and it's not functional. Is there something else I should do? thx

[@faouilalouiA1]

Awesome awesome . I did it all the way you suggested. Came out perfect!

[@-theway5158]

Turn this guy on 1.5x Speed .. i love his energy

[@codecommerce]

Haha thanks man!

[@ajiteshmishra]

love to see that vin diesel also codes

[@codecommerce]

Haha thank you dude! I’ll take that!

[@darexleon]

Love your videos, I have a question. For some reason the tailwind isn't applying and it doesn't look nice. Installed tailwind and replicated from your github but still looks ugly.

[@darexleon]

Nevermind, only updated the content -> content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],

[@lakshyanautiyal383]

after npm run build and hosting it to my website, the google button is not clickable. Can you tell me how to do that

[@itsir3211]

This is an another masterpiece tutorial Firebase is filter in Iran unfortunately😔

[@codecommerce]

Thank you iTsir. I didn’t know that :(

[@sl4ught3r94]

Chats are overflowing from as the messages increase

[@codecommerce]

I noticed that- I’ll have to make a change. Thank you!

[@sl4ught3r94]

@@codecommerce please tell the changes as u get through them.

[@ayush5994]

@@codecommerce plz rectify this issue

[@climax65]

​@@codecommerceplease send me the code for the message

[@thiagocgaleno]

why are you using an object classes outside?

[@basitkhan3853]

Make more videos on such types of projects I think you must make video on Instagram clone

[@codecommerce]

Will do! Thank you Basit!

[@jayadityag7670]

Hey I am getting this error when I am trying to login with another account :- (Do you have any solutions for this? ) Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared.

[@Localhost3001]

i have the same problem

[@pookie5752]

I am not able to get the user information in the console.log after sign in. can anyone help?

[@juguetestoys1137]

Hi, master ! Are you fine? I miss your videos ....

[@ozzy7556]

I am having trouble signing in another account in local host when there's already an account signed in. Anybody has this issue/solved this issue? basically I can't do what 1:00:54 does in the project.

[@obinnailoanya8730]

Wow, i missed the video, where are your beards, lol. You look completely different, just saw your shorts about getting motivated while coding and i saw beards, thank God i didnt see this when it came out, lol

[@codecommerce]

Haha still have the beard but it may be getting shaved! I go through phases 🧔‍♂️😂

[@obinnailoanya8730]

@@codecommerce hahahahah, it’s all good. Could you also make a video on how to host react website with multiple pages on cpanel so it doesn’t give a 404 notfound when we refresh a page

[@Gigamlat]

Question... Once the messages get be more then the screen size can handle, the messages go underneath the input field instead of scrolling in view (And thus putting the first messages to be seen only with the scroll). I followed your instructions so I don't think I messed up on this. Was this supposed to happen or was it not intended to behave to recieve more then 10+ messages?

[@martincristinadarroux9199]

You can use position absolute bottom-0 to the sendMessage input and button, if the last message is behind the input, use padding bottom in the chat container to put the last message up the input

[@sahilhussain9022]

just simply head to sendMessage Component and under the style (form) just paste this style " position: sticky " this should temporary fixed the issue

[@climax65]

​@@sahilhussain9022it's showing error

[@climax65]

​@@sahilhussain9022it didn't work

[@niteshprajapat.d3v]

This is fuckin mindblowing 🔥🔥🥵🔥 For me, your voice tone is too fast 😅 will you slow it lil bit ?

[@codecommerce]

Thank you! Yes, I need to slow it down a bit. I have a hard time keeping a slower steady pace.

[@ebraraltunkaynak6438]

hey teacher , scroll doesnt work, I check ur repostiory but I dont have idea still doesnt work :/

[@codecommerce]

Hmm I’ll have to check that - it is possible I missed something.

[@ebraraltunkaynak6438]

@@codecommerce thank u

[@techyvivekraj]

Can you help me to structure data. 1. InstituteTbl => SchoolName => StdTbl => 1st Std 2. InstituteDataTbl => SchoolName => StreamTbl => 1st Std => Science

[@gopalchopra9857]

Hi, i think I found a bug in the code. I tested it out with my repo and your repo and i noticed that when you have a lot of messages, the messages flow out of the chat box. How would i fix this?

[@cookedpotato]

You can make a issue on his git

[@broncos720z]

The problem is in the styling of the Chat.jsx, simply add "overflow-auto" and "mb-[50px]" in the main style and this will automatically adjust the chat on the chatbox section. Hope it helps! :)

[@josuehuertas4918]

@@broncos720z Do u have to add both of them to the Chat style? its not working for me

[@nabinsaud4688]

HI SIR Are you building a new project ?

[@ziontutorial]

when new video comes up

[@paowiicarina]

how to do the other localhost:3001 user to the localhost:3000 user,

[@mushthakmohd8195]

💞

[@codecommerce]

Thank you!

[@EkaBereit]

the scrolling does not work

[@VindexTOS]

21:49

[@donyd895]

Does anyone have a problem to get data from firestorm database?

[@codecommerce]

Are you receiving an error?

[@karthikeyanm3581]

actually google button not showing

[@codecommerce]

Hmm anyone else having the issue?

[@SuperArnie1974]

Hey Clint loving your work. Another great app completed the error I get is in firebase.js it complains about Firestore Unkown word any ideas how to clear that? Thanks again learning so much where I struggled so much with other YT channels.

[@olusanyaolamide9764]

Wow Thanks so much for the video, however I still can't fully wrap my head round why data.name was rendering while data.main. temp seem to crash the app, even though it's displays the result in the console

[@arkadiuszadamowicz4612]

about sending message bug i just changed order of adding new message to the beginning of an array by changing method to unshift: messages.unshift({ ...doc.data(), id: doc.id });