Build A Chat App With React And Firebase v9

In this video we build a full-stack chat application using React on the front end and Firebase for the backend technology. No complicated databases here - firebase handles all of that for us! We will also be incorporating OAuth with Google authentication in which Firebase will be handling as well. This is an updated version using Firebase web version 9 with modular imports. We also use Tailwind CSS for all the styling (because Tailwind is awesome)! This is not a deep dive into Tailwind, but I do show how to install and configure it correctly. I hope you like the video. Let me know what you think in the comments below!

NPM Packages -
*Firebase*
*React Firebase Hooks*
*React Google Button*

ZeroTo Mastery:

💻 Solve EDABIT coding challenges - BEGINNER! 💻

Github Repo

ZeroTo Mastery:

Timestamps:
00:00 Intro
1:11 - Create React App
1:44 - Install Tailwind CSS
4:06 - App Styles and Extracting Tailwind
7:45 - Navbar Component
10:30 - Install & Configure Firebase
14:12 - Firebase Auth Setup
19:24 - Sign In Component
24:32 - Log Out Component
28:40 - Chat Component
32:10 - Message Component
35:10 - Create Firebase Database & Read From DB
44:50 - Send Message Component

🔥 Connect with me on IG 🔥

☕ Support the channel ☕

[sahilhussain]

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.

[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 :)

[elconrel]

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.

[sggames]

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

[codveteran]

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!

[cutlerwhitely]

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

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

[johannes]

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

[developedbyjs]

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

[ronananderson]

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

[farhad.hossain]

amazing tutorial i seen. i really just fall in love with your tutorial of making react project <3 please keep it up and go ahead and make more more videos just like this :)

[blazerdork]

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

[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 :)

[eshw]

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.

[SacredScrolls]

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

[chiraglal]

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

[dennisshakava]

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

[crvenioklop]

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.

[m__link]

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

[er.skelafahmed]

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