A recorded coding session where Phil Choi and a co-host lead a live lesson to build a chat application using Firebase and React.js. The session is part of a multi-lesson course (this appears to be the fifth session) and is delivered interactively to a small live group.
Welcome, guys. Everybody to the fifth one, right? It's. We're going to use the next. The lessons that we've previously learned and we're going to build this today and I'll give it to Phil.
All right, cool. Thanks for joining. How many people we got in here?
We got 12.
12. Oh my goodness. In the spotlight here. But hopefully, I don't know, but hopefully it'll be like, informative. I'm going to turn off this server so you guys cannot go to it anymore. But this one, I'm just hosting with nrock for a second. Just turn it off now. It's dead. And I'll teach you guys how to do that as well if you guys want. Let me see. All right, I'm going to turn this guy off and we're going to start building. Oh, hold on. Git status, git add, git commit fixing types. All right, so we have always the complete folder right here is done and then we'll start working in the Firebase Firestore chat. So let me just bring up my notes too. So to make this, we're going to need to do what we did last week, Firebase, but we're going to only use Google authentication this time and we will use Firestore and we'll use something called React Firebase hooks. So first thing we need to do step one, here, let me just copy paste this up here to make this readme a little bit more legible. Just the packages. Packages like this, env and virus. I will turn off my kit up copilot disable completions for. All right, so the first thing we need to do is set up the project. I thought we were going to need like Daisy UI and stuff, but let's just. We're just going to use css. So. And then the next thing we'll do after we install step two, initialize Firebase module. And then step three, we will build. We will build the welcome screen where our people can log in. Step four, we're going to build a nav bar. So. Oh, navbar. And this will be where people can sign out. And step five, start building chat component. And we'll build chat box, message, send message and that's about it. So the chat box will hold all the messages. The message will show like the little items like the message person's like default photo and what message they're sending. And the send message will be the. The input to send the message. So let's get started. All right, get out of the complete folder. Let's go into Firebase Firestore chat. All right, all right. NPM run dev. All right, let's get started. I put. Oh, crap. That's. All right. Now we have a local host. 5173. This is the. This is out of the box, like bite. I'm gonna put the chat over here. Sorry. And if you guys have any questions, just ask along as we go. Cover your face, Mini. Oh, no, no, no. All right, here we go. All right, so first thing we need to do is. Hmm. Let's just get rid of this index css. I don't think we need it. Cool. Now just close all these files and the hubs and close complete one. I'm gonna go into app tsx. I'm gonna. There is a CSS file in here. The app css. I'll just copy paste this into my project. Boom. There you go. We lost all our css. So we're going to have CSS selectors for, like, the app, the container, the nav bar that we're going to create, the sign in, sign in, image, sign out, the welcome.
