The Final Project (Landing Page and Chat App with React) | JavaScript JOB READY Free Course (2025)

Okay, thank you guys for joining us for the the last of the JavaScript job. Ready course. We'll transition this into something else afterwards. We're still planning it out. There will be more and many more events for the community coming up. Just, it would be great if you guys give us inputs on what would be helpful for you. But yeah, anyways, this is the finale. We're going to put it all together. I'll give it to Phil.

All right, cool.

Thanks Minnie. I appreciate it. Let's, let's just. So what did we do so far on this? We did. Lesson one was just JavaScript basics. Lesson two, I'm gonna make my screen a little bigger. Lesson two was the express server and lesson three was the. What was lesson? Oh, it was the random users kind of thing to hit an API and handle that one. Going to rename this to random users.

All right.

And then lesson four was Firebase Authentication. Lesson five was the Firestore chat. Lesson six was some sign up form validation and now we're on lesson seven. So I'm just going to show you guys, it's not very impressive but we're just going to learn how to make like, you know, put it all together actually. So I think that is the most important thing now because we made little like modules now and we can put it together. So.

Here we go.

Minnie, are you still there?

All right, yeah, I'm here. What's up?

Let's just chill through it.

Yep, hang. Just put this here.

So local host 5173. So this is like a simple landing page. I guess we could just switch out the contents later a footer and then you could press a button. It could take you to the author section and then we can do this one and we'll make new routes and then when you log in it'll take us to some kind of chat or.

Some kind of thing.

So let's just put it together and let's get started. The website.

Okay, so let's go.

First thing we need to do is in the complete one, I put the instructions of how to get this page started. So we're going to just focus on the code for a second.

Close all these guys out.

Where did the read me go that I wrote? Oh, where did the readme go? Here.

Instead of complete let's put a new file.

Or first instead of the website I'm going to turn off all my auto completion stuff.

Disable completions. All right, so let's see here.

Let's go to website. The first command we'll do is npm create byte@ latest. And this is how I always start my React products recently with byte. It's really fast.

There you go.

And the app tsx, I'll just remove it and then I'll put export default. Default function app Oops, my L keys.

Or your finger slaps.

All right, so now we have these. These aren't real big. These aren't real errors. They're just. I'm missing the tailwind package. You can read about it like here.

Here, one second or copy paste that.

I don't want to install the extension. You can just copy here. There should be some kind of form for it. Unknown rule at tailwind. And it's just they say that it's a warning for VS code. Not explicitly an error. Tailwind should still work regardless. So that's all it is. Installing plugin helped me. I don't want to install the plugin right now because I don't.

Yeah, I don't do much right. To be honest.

All right. Anyways, so go back here and I'll just. I'll just commit real quick and it.

Proj in website at lesson seven, which. All right, now.

Now we have to set up the Firebase stuff. So I think we just set that up app tsx on the main TSX we have Firebase initialized. Cool that right now. Now let's get started on making the. The landing page. So when someone comes into the page, they should be able to see some kind of landing page. And then from there they should be able to log in. And then so let me go to my favorite website here. Draw IO.

Create a new diagram. Great. All right, hold on. There you go.

What should we do when someone comes into like let's say www.letphil.com or something? There should be some landing page, right?

I don't think circle makes sense. Let's do like a square.

There should be some landing page and from the landing page you should see some information about whatever. Right. The company. And then from there there should be some button like where someone presses it and that takes system off screen. Right. And then it could go there and then after the auth screen they can log in and they should see some authorized part, right. Like which is like the meat of the app.

Author logged in section.

But before they hit off screen they shouldn't be able to see this section.

So that's something we'll do today.

This is kind of the flow that will go and let's get started. All right. If you guys don't know draw IO.

It's like a.

It's like one of my favorite websites. You can do like a whole bunch of stuff here, like entity relation stuff for like your. Your ERD and make tables and all this kind of stuff. Yes. It'll be a hidden route. If you go to the logged in section, it should kick you out and take you to the login. The login section with a fallback route with navigate. So I think there's a couple strategies for that and we'll. We'll get it done. All right, so I'm gonna close this guy now. If I go NPM run dev.

Should see. Just pull up some stuff here. Localhost 5173.

We see hello world and we see the Firebase log inside of the console telling us that the Firebase is initialized, which is pretty cool. All right, let's get started on making some kind of landing page or something.

All right.

I like this dev environment where I kind of have like VS code half. Half open and half browser open.

I'm gonna actually move the chat so I can see what's going on. Move the chat over here.

Yeah, I like it too, man.

This is.

How was your weekend Mini, by the way?

It's all right, dude. Yeah, Just exciting things for Leadville. Coming, dude.

Hell yeah.

Oh yeah, dude.

Yeah. You guys will find out soon. How's your weekend?

Ah, you know my weekend, man. I was. I'm not in the best condition.

I got a little sick. One second. Guys. Want to see something? Get Fire store. You want this one too?

Crap.

Oh.

Initialize.

We should do export DB and DB equals get Firestore.

We'll pass in Firebase app.

Const Auth equals get auth. We'll pass in Firebase app. Oops. There you go. And then we'll just export these guys too. We have access to them all the time.

And we'll just log these guys.

Init. Firebase app here.

I just want to log out these.

Guys just to make sure they're all there.

Oh, there's someone new. Can you explain a little bit what we're doing? Sorry.

Oh, yeah. So today we're going to. We're learning react router. So we had a couple lessons before about like authentication and like Firestore chat app. So I just want to kind of connect everything with the landing page. So we're going to make this kind of section. Landing page off screen into the logged in section and we'll make a very simple UI for the landing page. Please don't make fun of my.

Styling.

Styling for me, it'll look good no matter what.

Yeah, like Craigslist is the best website.

That's my dude. That website rules. Yeah, how did that guy make a billion dollar company with his email list?

Dude, it's crazy.

All right, anyways, so now we have everything initialized. You'll see that firestores initialized, Auth is initialized. So we have access to them everywhere.

All right now Coolio, let's get rid of that log and oops. I should get rid of these comments. All right, can I push those comments like this? Holy. I should get rid of that too. All right, here we are.

So the first thing I want to do is I want to make a components folder. I would also like to make pages folder. And let's just keep it at that for now. And then what? Let me think in a routes folder actually.

Routes. Cool.

Components, pages and routes. Coolio. Since we have Daisy UI in installed and everything, React, I'm just going to go here and I'm going to copy paste some little components that we can use. React daisy ui.com it's not alive.

Let me see here.

There was a site earlier, daisy.com components nav bar.

There we go.

All right, so we got a nav bar. I'm just going to take a responsive one. Responsive drop down. Let's just take it yoink and let's go to components. Let's add navbar TSX.

Export default function navbar Whoops Navbar return. All right, cool.

And inside of the app tsx, we should actually put this stuff inside of something called landing now landing tsx And.

I'm thinking.

Just make the pages real quick. And I'm gonna. So what I like to do in all my files, I like to add an index file and then where I export it from there. So I can just say export. So on the landing TSX I'll make an export default function landing here and I'll return div landing page.

There we go.

And then inside of here it takes the default import export. So export the default as landing from dot slash landing. And that's going to export this landing here. And then I can later on I can import things from just with the curly brace like landing from dot slash dot slash or dot slash pages. So I'll show you how that works right now. So inside the app TSX I'll do import landing from the pages. So meaning I could have done the import just from import landing from dot dot slot dot slash pages landing. And that would be the same thing. But Wait for I do the curly brace. I can do a bunch. I can do a bunch. So I like if I need more than one page in a import I could say like, say I have like a couple pages in here like landing about and I could just do it for all only from the index file and I. That's why I like doing that and it's easier for me. So there's the landing page getting rendered on from app tsx. So what I like to think about in React is like parents and children. So what I always think is like main tsx or like the entry point is like the biggest parent. So how react invite works from my opinion or from what I know is there's an index HTML, everyone knows this. There's here I'll just change this guy.

To website or something.

Anyways, so we have div ID root that's like the. Where like everything is rendered by the React engine. And then you have the script of src main.tsx. so this is the biggest parent. So if I just potentially just say like H1 hello world here it should say hello world here. Right, that makes sense. So then inside of this div.root it's getting rendered and then inside of src main tsx it actually get element by id and then it's rendering the JSX that we're putting inside of React project. So that is what's going on. And then from main TSX is the next level of parent from my opinion. That's how I see it. And then when I get import app from app this is like my next parent. That's like it's child. And then from there, from there I kind of like think about, you know, passing props and all that kind of stuff. And so I barely touch main tsx and here I'll wrap it with like some like Global State Manager or something like that, like context or Redux or Zustend or Recoil. Maybe we should use Recoil today. That'd be interesting. All right, and then, and then from the pages is going to be the router. So always think about like parent children because a parent can give something to a children very easily. But a child giving something to the parent is kind of difficult. Like that's why you have to have Global State managers and things like that. Does that make sense?

Hopefully.

All right, so let's add the nav bar here and I'll do the same thing here in components index TS export default as navbar from dot slash navbar.

All right.

And instead of landing I'll do like this.

Import navbar from components and there I'll just type navbar. There you go.

Now we have a nice navbar with a button and this. And then I think if we go like this, they should pop up like that.

All right.

So let's just change in the nav bar. Let's make that button say login. So I'll go to line 71 login and we'll go to this Daisy UI thing and we'll.

Change it to website. Cool. One second. All right.

Now we need some kind of carousel underneath. I think that's how a website is usually. So I will go get a carousel. Let's get one carousel. And I want like carousel with next and previous buttons. Nice. Looks nice, looks nice.

Author logged in section.

But before they hit off screen they shouldn't be able to see this section.

So that's something we'll do today.

This is kind of the flow that will go and let's get started. All right. If you guys don't know draw IO, it's like a. It's like one of my favorite websites. You can do like a whole bunch of stuff here like entity relation stuff for like your. Your ERD and make tables and all this kind of stuff. Yes. It'll be a hidden route. If you go to the logged in section, it should kick you out and take you to the login. The login section with fallback route with navigate. So I think there's a couple strategies for that and we'll. We'll get it done. All right, so I'm going to close this guy now. If I go NPM run dev.

Should see. Just pull up some stuff here. Local host 5110 3.

We see hello world and we see the Firebase log inside of the console telling us that the firebase is initialized, which is pretty cool. All right, let's get started on making some kind of landing page or something.

All right.

I like this dev environment where I kind of have like VS code half. Half open and half browser open and.

Actually move the chat so I can see what's going on. Move the chat over here.

Yeah, I like two man.

This is.

How was your weekend mini, by the way?

It's all right, dude. Yeah, Just exciting things for Left Phil. Coming, dude.

Hell yeah.

Oh yeah, dude.

Yeah. You guys will find out soon. How's your weekend?

Ah, you know my weekend, man.

I was.

My. I'm not in the best condition.

I got a little sick. One second. Guys want to see something? Get firestore you want this one too? Oh.

Initialize.

We should do export DB and const.

DB equals get Firestore. We'll pass in Firebase app.

Const Auth equals get auth. We'll pass the Firebase app. Oops. There you go. And then we'll just export these guys too. We have access to them all the time.

And we'll just log these guys.

Init. Firebase app here.

I just want to log out these guys just to make sure they're all there.

Oh, there's someone new. Can you explain a little bit what we're doing? Sorry.

Oh, yeah. So today we're gonna. We're learning react router. So we had a couple lessons before about like authentication and like Firestore chat app. So I just want to kind of connect everything with the landing page. So we're going to make this kind of section, landing page off screen, sent to the logged in section and we'll make a very simple UI for the landing page. Please don't make fun of my.

Styling.

My styling. For me, it'll look good no matter what.

Yeah, dude, like Craigslist is the best website.

That's my. Dude, that website rules.

Yeah.

How did that guy make a billion dollar company with his email list?

Dude, it's crazy.

All right, anyways, so now we have everything initialized. You'll see that Firestores initialized, Auth is initialized. So we have access to them everywhere. All right, now, coolio.

Let's get rid of that log and oops. I should get rid of these comments. All right, can I push those comments like this? Holy shit. I should get rid of that too. All right, here we are.

So the first thing I want to do is I want to make a components folder. I would also like to make pages folder. And let's just keep it at that for now. And then what?

Let me think.

And a routes folder actually routes.

Cool.

Components, Pages and routes. Julio. Since we have Daisy UI installed and everything, React. I'm just gonna go here and I'm gonna copy paste some little components that we can use. React.daisyui.com it's not alive.

Let me see here.

There was a site earlier, Daisy UI.com components. There we go. All right, so we got a nav bar. I'm just going to take a responsive one. Responsive dropdown. Let's just take it yoink and let's go to components. Add navbar TSX export default function navbar Whoops. Navbar return.

All right, cool.

And inside of the app, tsx, we should Actually put this stuff inside of something called landing. Now landing TSX and.

I'm thinking just.

Make the pages real quick and I'm gonna. So what I like to do in all my files I like to add an index file and then where I export it from there. So I can just say export. So on the landing tsx I'll make an export default function landing here and I'll return div landing page.

There we go.

And then inside of here it takes the default import export. So export the default as landing from dot slash landing. And that's going to export this landing here. And then I can later on I can import things from just with the curly brace like landing from dot slash dot slash or dot slash pages. So I'll show you how that works right now. So inside the app tsx I'll do import landing from the pages. So meaning I could have done the import just from import landing from dot dot sl or dot slash pages slash landing and that would be the same thing. But if I do the curly brace I can do a bunch. I can do a bunch. So I like. If I need more than one page in a, in a import I could say like, say I have like a couple pages in here like landing about and I could just do it only from the index file and I. That's why I like doing that and it's easier for me. There's the landing page getting rendered on from app tsx. So what I like to think about in React is like parents and children. So what I always think is like main tsx or like the entry point is like the biggest parent. So how react invite works from my opinion or from what I know is there's an index HTML, everyone knows this. There's here I'll just change this guy.

To website or something.

Anyways, so we have div ID root that's like the. Where like everything is rendered by the react engine. And then you have the script of src main tsx. So this is the biggest parent. So if I just potentially just say like H1 hello world here. We should say hello world here. Right? That makes sense. So then inside of this div.root it's getting rendered and then inside of src main tsx it actually get element by ID and then it's rendering the JSX that we're putting inside of React project. So that is what's going on. And then from main TSX is the next level of parent from my opinion. That's how I see it. And then when I get import App from app. This is like my next parent that's like it's child. And then from there, like that. From there I kind of like think about, you know, passing props and all that kind of stuff. And so I barely touch main tsx and here I'll wrap it with like some like Global State Manager or something like that, like Context or Redux or Zeus Dend or Recoil. Maybe we should use Recall today.

That'd be interesting.

All right, and then, and then from the pages it's going to be the router. So always think about like parent children because a parent can give something to a children very easily, but a child giving something to the parent is kind of difficult. Like that's why you have to have Global State managers and things like that. Does that make sense?

Hopefully.

All right, so let's add the navbar here and I'll do the same thing here in components index TS export default as navbar from dot slash navbar. All right, and instead of landing I'll.

Do like this, import navbar from components.

And.

There I'll just type navbar. There you go.

Now we have a nice nav bar with a button and this. And then I think if we go like this, they should pop up like that. All right, so let's just change in the nav bar. Let's make that button say login. So I go to line 71 login and we'll go to this Daisy UI thing and we'll.

Change it to website. Cool. One second. All right.

Now we need some kind of carousel underneath. I think that's how a website is usually. So I will go get a carousel. Let's get one carousel and I want like carousel with next and previous buttons. Nice. Looks nice, looks nice. Or we can do a few full bleed carousel.

It doesn't matter.

But I think this one looks nice. We can go jsx. We can change the pictures later.

Copy that.

So we'll make another component called carousel tsx.

I'll close some files real quick.

Carousel.

Export, default function Carousel and components.

Always need to be capitalized. That's how you kind of know that if they're not, I think react will yell at you. So anyways, so now we have carousel one second. And then inside of here I can.

Do.

Export default as carousel carousel.

There we are.

Now we can just inside of landing on the same import line we can.

Put carousel here and underneath navbar carousel like so.

And whoops, the request is module src Components Index does not provide an export name Carousel.

Yes, it does.

I didn't save it.

All right, all right.

So now there's a carousel under here.

All right, cool.

So website, you have a nav bar. You have a carousel. The next section, I think are like, I don't know, info cards or something. So I like Daisy ui. It's very. Everything's put together and there's like, they have responsive stuff, so it can work on a phone. And I think it's really popular. Like if you go to GitHub.com daisy UI. This guy made it. This is forked. Oh, no, this is the real one. It had like 33.7 thousand stars. So I think it's pretty good. And there's some cool templates with it too. So I'll just get some cards here.

I think.

This guy looks nice. Let's put this guy inside. Do. How would that look? Anyways, under the carousel looks okay for me. Minnie, what do you think?

It's perfect, bro.

Thank you. All right, that's all I need to hear. All right.

That's right.

I'm gonna get. I'm gonna need three more. I'm gonna make three. I'm gonna get three cards. There is a grid that I'd like to use. Look at layouts. So when. When it is like medium or large, I would want three cards on this, on the line. But then when it's a small screen, I want it kind of making one. So I have to look that up. Just give me a second here.

Let's see the grid here. Red Cold War, Red Coal medium.

You know what? I did it in the complete one already. I'm just going to explain it after I copy paste it. Just give me a second here in the info cards.

All right, let's go back. All right.

I make components. I make something called info cards.

Tsx, Copy paste that guy.

So this guy gets set to a grid, and grid calls column one and gap four. And then on small, the grid call is three. And on a large grid, cold is three.

That makes sense anyways.

Because in responsive stuff, everything is divided by 12, right? So you give it a space of four or space of three, I think.

All right.

And then let's see if it works. That is.

That is the most important default info.

Cards from info cards. And instead of landing, I'll take the info cards and we'll put it on.

The bottom of this part. Now I think I forgot to save.

There you go. So now it's. Now we have this kind of section, and then we have these info cards, and then if we close it up, it can get smaller in response. So yeah, and then it has hard. Anyways, it's working. So let's make these a little bit more dynamic, I feel. So think about.

What kind of images do we need.

Let's just get three different images.

Let's go back to here and cards.

They have a bunch of images here on the top of carousel. We'll get these three images.

Wait one second.

That one. Three different images. This one.

Get this one.

And I'll show you. Let's try to make it a little bit more dynamic. Well, I'll do that right now. I just want to make sure they're different. So we have a cone. We have three different images. So I'm going to make Info cards. I want to pass Info Cards data in here. I'll make an interface. I Info Cards. The info Cards data will be.

Like this.

It'll take an image it'll take as a string, it'll take a title as a string and it'll take some description.

Text, this ripped shell spring.

And then I'll pass this guy, pass this guy here. And I'll make an array and then don't use it yet. But basically this is one card, right? This one. So I'd like to actually map over and do it dynamically. So give me one second. I'm going to comment this guy out. I'm going to comment this guy out.

All right.

Now in here I'm going to make the data for the info cards. So let's go Info Cards data. I'll pass an array and just.

Sit up here.

Const.

Info Cards data equals an array and we just pass it here.

And what I said we need here.

Is I mentioned.

Title.

Description and I'm just going to get these three images here. Oops, guess I didn't. All right, there.

And then we can pass in.

Different images.

Can you explain whether the landing page is the parent in this case and the child is Info Cards? And why do you set up interface in the child Info Cards? Uh, so Info cards is a child of landing page. And so I'm going to pass data from landing to Info Cards and I put the interface inside of Info Cards because if I have like a small component or something, I just usually just make the type in here to kind of use for this prop and it's, it's, it's. It's better than making like a whole different file for interfaces for me if it's just one component I'm talking about and I don't know that's how I kind of write my code. Is that okay?

All right.

Anyways, so let's just do a Title 1 here. Description 1 Title 2 Description 2.

Title 3 Description 3.

All right, and then we'll pass the info cards data here. And inside of info cards. Let's just make sure that it's coming in correctly. Console log Info cards data equals info card data. And maybe I'll put the file path in here just to. So inside src add components at info cards tsx. I am logging this. So now the info cards data is coming into my. Into my child, into the component. So now I can actually map over. So I'll figure I'll do that now. So I'll just do like this. I'll take the info cards data. If it's there, it'll always be there. And I'll just map and then info card and I will return.

Whoops.

This component, this card component here. And inside of this src I'll put an info card title or image. And I'll put here info card title. And inside of this description part I'll.

Put info card dot description.

And I should be seeing three different cards. So I'll delete all this code here and we shorten the code a lot.

So there we are.

And now we have three back. But they are all the same, same image. Because I think I copy pasted the wrong images. Let me go.

Let me get different images so it'll be more appealing.

So now we have some kind of thing where it's mapping through. But we do have one error check the render method of because we do not have keys. So when react renders a bunch of the same in a map, you need to put a key on it. So I'll show you guys how to do that map. I'll take the IDX and that's a number. And in the very most parent I'll put a key and then I'll put info. I'll make like a string template here.

Info card title and I'll put a little hyphen and I'll put IDF statistic. That should get rid of our warning. All right, cool.

Now we have a simple, simple website. Looks good to me.

Hold on. I just wanted to do something. Here I go.

VR.

How you doing? VR.

VR.

So close. All right. Take a little br here and a little. It's looking good to me, man. Amazing.

All right, and then I think we need. What? It looks awesome.

Yeah.

Holy. I didn't know. I didn't know I had it in me, dude.

To be honest, to make a great website right off the gate like that.

I know, right? It looks sick. Oh, sorry about the language.

Sorry.

That's great.

I mean, if you just switch out and add a little bit more css, I think it's an okay website, dude. You know what I mean?

Better than most websites, to be honest.

And it's all, like, responsive and everything. Holy.

Look at that.

Oh, my God.

The hamburger bar right there. Holy.

Oh, my God. Thank you. Thank you for boosting my company.

Yeah, thank you. Still has it in them, dude. To create amazing websites. That's what's up, man.

I don't know if you're being sarcastic.

No, no, I'm serious. This is the best website you've ever made.

Oh, really?

Yeah, dude. At least what I've seen so far.

Oh, my God.

In terms of styling, I didn't know, dude, you had it in the front end stuff.

All right, well, let's put a footer there too. It'll be freaking amazing. Hold on. So every page needs a footer. So let's just make another component footer, tsx, which is export default function footer. There you go. How many people do we still have in here?

We?

Everyone in here.

Nine people in here, so.

Oh, nice, dude. Didn't lose anyone.

All right, cool. Yeah.

All right, now let's just take the index here. Export default as. We could have just put everything in one file, but I think just breaking it up so we can kind of develop on it later would be easier. And then in the last part, I'll just put the footer here. And because we put everything in the index, we could just import everything on one line. And now we have, like, a nice little website, kind of.

Right.

Really nice.

Put another.

What do you guys think? I don't know if you could. If any of you guys in the chat could do it any better, to be honest.

Thank you. I think Jocelyn can definitely do better.

All right. Jocelyn's got some skills.

Yeah, she got skills.

But, dude, this is a very simple website. You know, if someone's landing page, you can just change out the assets for their stuff, simplify it, and just use it, I guess. I think Daisy UI has a lot.

Of stuff.

That is kind of weird, though.

It kind of.

When you go here, and I think it automatically gets put to here, so.

I think it's okay.

Yeah.

All right, cool.

So now we have to actually use the router. So let's start doing that now. So we have a landing page and we made the auth screen before.

We'Re.

Going to make one way better. I think someone one's coming out in the.

What is it called?

Figma soon. So we'll use that one. I'm going to call it the app router tsx and I made it earlier, so I'll just yoink it.

Hold on one second.

Import. I'll get the routes. I need these imports here.

Well.

All right, I'm going to need these imports.

Export default function app router.

Then we'll do the return on the browser router. And the first one I think is routes. Trying to use a different structure earlier from the documentation, but wasn't working as expected. So I think we'll just keep with this one. Then we'll do the route inside of routes and right now we'll have one route. Right. So we'll have.

Whoops, let me just look at the route here.

Landing and auth we'll take landing from.

Pages.

And then in the app router we'll do the same thing. Actually Router. I don't think we'll have. We'll have maybe one or two. So we'll just keep it like this. And then inside of the app tsx now. Right. Instead of giving back landing. So we can do import app router like this. And then I will.

Put that guy there.

And then now it's still serving.

Oh.

Now it's still serving the app router Insider App tsx at no route. Now I just want to show you guys how router works, but I do want to take one feature out of here because I do see that it has some kind of thing in here.

Carousel TSX inside of left side. Give me one second.

I'm going to take all these hrefs.

Out because we have to.

We have.

To do something about that too. Oh, I guess that's how it works. The href. Okay, I guess that's. That's how it works under the head.

All right, anyways, so all right, now we need to. We need to add the off screen. So when I press login it should go to the off screen.

I'm thinking. All right.

I think from lesson four we made an odd screen.

So I just y this guy.

Odd screen. There's the odd screen right there. So I'm just going to yoink this.

Go.

And then inside of lesson 7 at Pages.

Whoops. Not the complete one.

Website. We go to Pages. Just make an auth TSX. Bam.

Export default function. What's going on here? Maybe I just yoink that whole guy.

That's better.

I have no Idea.

All right, we'll. We'll move this logic in a second.

I just have to do like this real quick.

And then inside of this auth because I'm setting some kind of user in here. So I need to kind of handle that right now. But give me a second. Now I will do export default as auth from dot slash off. There we go. And then now inside of our routes, inside of the app router I'll do auth and at the route of path equals auth. I'll pass the element of off.

Whoops. Closing.

All right, now if I go to slash auth, I should go to the auth page and it's 11 o'.

Clock.

I need to take a little break. I need to go to the bathroom. I'll Be back in 60 seconds.

Be back.

It.

Sorry about that. I'm back. I drink like a monster energy drink every morning recently. So I chug it.

So I have to pee all the time.

Anyways, so as. So now we're at the off screen and if we go back we should be back at the home screen. That's. Oh, now we need to hook it up to this login button. Let's get going. And I'm thinking if we have that auth router, right, and we have this use state user credential. And just looking at something here.

Get off.

I'm thinking in this parent we can have a const.

User whoops user set user equals use date. And let's just take that stuff, just take that real quick.

And put that there. And user credential come from the firebase Auth. I like to put third party libraries on the top of the file and then I put a space and then I use local here.

So that's just something I do. I think. Where did, where did I learn react React code with Moby.

I think I was like watching that tutorial a long time ago.

All right, anyways, so if I just.

Console log.

User equals user here and.

Then if I actually pass set user.

Into here right in auth.

And then potentially.

I could just.

I get rid. I can yoink you right? And then I can export default here.

Hold on.

Export default auth screen right off screen.

Yeah, I think that should work.

And then now I'll have access to user here. So someone logs in. I should be able to see the log of user users null right now in the parent. And then if I set user inside of auth screen I should be. I should see the log of user.

My opinion.

So just give me a second. And did you say anything? I had to go to the bathroom real quick. Yes, I did.

Oh, there's a direct message.

I'm here though. Okay.

Yeah, just give me a second. I need to. So now inside of the carousel, I mean the nav bar. So say I'm in landing page. Here I'm gonna do like this import use navigate. And here I'm gonna do const. Navigate equals use navigate like this. And then inside of the carrot, inside of the nav bar I'm going to pass in go to op and then that will be a function called navigate to slash off. And then a navbar interface inavbar.

Then go to auth via void function. That's there. Go to auth. Will be at this on click equals go to auth.

Now let's log in. It goes to auth.

Cool.

So now let me just see something real quick. Firebase console. Firebase off.

All right.

And authentication. I think I made someone before. I think tested, test, test.

It's that one. We have some messages here. So cool.

All right, one second, let me. I think if I put. Now test, test what?

Login.

Sign an attempt and user is logging now. So now I can kind of say, hey, if user is allowed, I can. So now it's logging. I'm. My guy is logged in. Just give me a second.

Now from the Whoops off screen app.

Router, we can actually hide some routes unless the user is there. So we can say on user on user there we're going to add a route to path equals. Let's just call this logged in section. I know that's not a very good name, but.

Maybe something better we just. Should we call it.

Anyone have a cool name for a logged in section? How about just Chad?

Right?

Is that cool?

Login section. All right.

Logged in section.

All right, just.

Yeah, log. I mean just log in, I think Logged in. Log in.

I'm talking about after they're logged in.

Oh, chat room.

Chat room.

All right, all right, cool.

That's it.

Element. And then I'm just going to put.

Some.

Simple UI in here for now.

Div. Log in. Whoops, something broke. But let's read the red line.

Unexpected identifier.

Am I not allowed to do this in react. Is there function there like this? No.

You are not allowed to do this.

Thought you were. Oh, there we go. All right, so just.

Let's just say I try to go to chat room right now. The element is going to take. It's going to redirect me here. So but then if I go to login and I do now users alive. So maybe if I go to chat room now.

Nope.

All right, so we need to persist it now. So let's get going. I think there is a hook that we're using to persist it.

Let's.

Let's go back to lesson five and inside of Firebase Firestore chat. I think I was using some hook and I was pretty good. So there's something called use auth state that I think I can use instead of the whole user kind of thing. So let's try to use that one instead.

This then I will pass.

I'll import.

Use auth state. Where does it come from?

Give me a second. Use auth state from.

Oh, react Firebase hooks. So there we go. And we'll also import.

Auth main.

I think that should work now we can get rid of you guys. Whoops.

Set user is not defined.

So I don't think we need to.

Even pass set user anymore because I think that's. That hook will handle it all for us.

Set things here. User email, set user nothing. And just get rid of that. Another red line here.

User is live here.

Chat room. Whoa, one second. That should be there.

I'm going to actually put the hook here instead.

So I'm gonna.

I'm gonna put that inside of chat room.

Any section if it's null, it's. We have to say it's still loading. So if user return loading should see.

A loading section for a second and.

Then maybe we can do this one. Whoops.

That chain is not good.

Okay, that fine, go here. Okay, I guess that works.

And then if I have not, I'm going to make a log out button in a second inside of here. I'm going to make a login button. Log out button. So I think it's auth dot sign out.

So I'm just going to make an.

On click equals auth dot sign out. Now if I sign out, I should potentially be kicked off of this screen. Those user is null. User is always going to be null.

We have to control that a little bit now.

It's always going to be.

No, no, I'm thinking real quick, I'm thinking so.

You know, we're going to put the logic inside of the logging this page here. So I'm going to go here.

I'm going to say chat rooms via tsx. What I'm getting some red lines here by the way. All right.

And then.

Whoops.

The chat rooms. I'm going to put in this component here.

Default function chat rooms And I'll return this. Okay, so now.

There'S two methods I could go with. I could go with context or I can go with.

Let's just go. Let me think. What did we put?

If user.

And then we put this route.

And then if the user is not there, then we put the other stuff.

I'll just do it inside of the chat rooms.

Then we can do const User equals use auth state.

And then on the app when the off and we'll import auth.

Auth main.

Console, log user here.

Then at any point, if they try to come, we can kind of just make a use effect here. And then we can say if user is null, we can say navigate back to home.

It.

It's just that.

Let's do that strategy for now.

Import.

But then we'd have to say before that use effect runs and say return.

If user can return. No. Whoops. What's going on? Div loading. And I'll find name, use effect and.

Then use effect.

React. And we're also going to need import use navigate, then use effect react.

Call condition react must be in the same order in every component. Did you actually call react hook after an early return? Yes, I did.

So this.

But I do feel like user is always going to be null here.

Let me think real quick. Let's.

Let's handle it somewhere else.

I'll show you. All right, well, now I'll do cons. Navigate equals use navigate. There we go.

And inside of the app router, instead of giving this guy, we'll do chat.

Chat meetings like this. And instead of pages, we'll do explore default as chat rooms. Chat rooms. There we go.

And we have an unused import there. Now if we go to chat rooms.

Whoops. What's going. App router. We're still conditionally routing this and we're.

Going to handle the condition here. He's loading.

Let's check.

If the user is null, we can just say.

Login. You can say like button go to login and you can say on click.

Equals navigate to Docker slash on.

I think so now go to login.

And then test, test, test login. Now user is there.

Now if you have a chat rooms.

Now we can go to logged in section.

Cool. And then log out. I'm gonna log out.

Oh, we didn't put the logout function yet.

One second.

All right.

Log out then.

I said go to login now go back. And then now if we press this login button, we have to make it so that they go to the chat.

Room section all right, and let me.

See here.

Off screen. I'm gonna go to. If that happens, we can do the.

Navigate.

Call this hook here too. All right, use navigate. And then we can say like this.

This one is the create user.

We're going to do the login user. Where's all.

You sign up? So now I can go to test, test, test.

Login.

And now I'm in the logged in section. So now I'm going to copy paste that whole chat room that are. Yeah, I'm going to copy paste the whole chat room thing that we made in lesson.

Lesson five.

We're almost finished.

Exciting.

Copy this, paste. Oh, chat components. There you go. And now.

We can render the chat box.

Yeah.

I have a bunch of any types in here on the.

Slash. This one you should be good and get rid of you. And.

Now we can actually just.

Put the chat box in here, I think. So let's do that. Hopefully chat box, chat box.

Now I don't have the css, the CSS in here, but yeah, we get, we pull all the messages and if.

I type looks fantastic, dude.

And then I have another hello here. So amazing. So I'm just gonna pull the CSS from the other one in here real fast. Give me a second.

Where are you app css? There you go. Just copy paste.

You know, like, just like what I wanted to kind of like make a point of is like this code. You can write stuff and then, you know, reuse it later on. You know what I mean? Right now we have this guy, but there is a broken, like image because I'm using a fake user. But if you sign in with like a good user, you should get a good image. But yeah, now I'll just re add the log out button and then we'll just see it working all at once.

So.

Where on chat box we need a logout button, right? So in chat rooms, just.

This button log out on click.

Auth sign out. Or actually if it's a callback, you.

Just do like this. Oh, oh, crap.

Right now if I press log out, not read properties, reading app.

Refresh, log out. One second off. Maybe I just need to do it like this actually.

Oh, Merle's here.

Hey, Merle. Why is the log not working?

Okay, now logout is working. Go to login. Now I can go back just to the landing page. Now I can go to login. Now I can go to test, test log, test login.

And now I can go to the hello world.

Coolio. So now we put everything together and we can log in, log out. We have a logged in section of the app and that should be. I'll push this code and let's. We put everything together and that's. That's it for today. Hopefully it was good, but we'll chill for a second and. Yeah.

Anyways, Minnie.

Yeah, I'm here.

Yeah, I think we're done for today now. Yeah, but everyone learned something. This was like we took all the pieces from earlier and then we kind of were able to use them inside of the final and I thought it was pretty useful.

Yeah.

So I hope you guys learned a lot over the last couple weeks. You know, this is just the first of many lessons, you know, and free, free courses to come. Right. Community. So thank you for joining us. Yeah, just. Yeah. If you guys have any questions about live or anything, even, you know, Phil's here right now to answer all your questions. Yeah, let us know. We're here, man.

Yeah.

And if you want, if you go, if you ever want to wonder like how the chat's working, just watch that video from before. I think it's using the Use use on Snapshot and on Firestore, all the messages getting saved in the Firebase console here.

That's right.

So that's what's happening there.

So yeah, question, I think already.

Oh, it's great learning the routing logic. It's pretty useful. How about if you have multiple pages, like 20 routes, how do you handle that logic? You just have to keep adding the routes in the app router. But sometimes I'll have like, like at least in like react native or something, I'll have many routes. Like I'll have like the auth routes separated into another place. So when they first get to the page and they cannot, they cannot log into the app, they can only see the Auth app and then if the user's there, I render a different router. So I would have multiple routes, but they're like many different strategies. There's like layout routes where you can actually use like the same nav bar and all this kind of stuff for the same, same part of the apps and you can like display the routes in a different place. But I like to put all the routes in one file. That's like my opinion. But yeah, you just keep on adding like if there's 20 pages, you just keep on adding these routes. And like what this line on line 21 is doing is it's checking on every path and if it doesn't, if it doesn't exist, just navigate them back to the landing page and that's something called like a fallback. So you should definitely hope that answers your question and hopefully you guys learned something through these past weeks because it was really fun for me.

Yeah.

And it was cool because we got to kind of put everything together in the end and I know like it, you know like because we're kind of like learning some random stuff here and here and here. But then it all came back together. Like you need authentication to make any app. So I thought authentication was good then the authentication to making a chat because now you need to see who makes the images.

Right.

And yeah, and I mean the messages and from the messages we need to route it all together now. So we routed it all together and then part of the Firestore logic I think is rendering things from getting the data from Firebase and Firestore. But yeah, I mean was this your first time, Alex? No. Oh, why the, why the theory? Yeah. Why the sadness? I've been here for a few classes. Oh. It just felt like you were, you were reacting with teary eyed face. Ah, no, it's not, it's not. We're gonna do other ones.

Yeah, it's a different, different.

Honestly we're gonna do something a little bit more simple for these one day projects because I noticed like maybe you know, if you weren't following along from the beginning you get, you could get a little lost. But we're going to just do like simple like tic tac toe games. Maybe I'll do some python stuff.

Right.

I also want to open a class where we like learn something together. Like, like I don't know how to do golang but I want to like maybe open a class where we all learn together which would be kind of fun.

I think we're gonna do like one offs. Yeah like instead of like series and also we want to do like you know a lot of people are interested in algorithms for the reactions. So we're going to do some algorithms together as well.

Some leaked code or some. Yeah. Code wars and I want to get into. So if we, we do the leetcode or code wars, I would just want to put it in the visual studio code in our editor and then write our own. Write our own tests and teach you guys how to test your code and stuff like that with jest. And I hope you guys are interested in that because testing your code is always really fun.

So I think we can do that.

Yeah, algorithms are I think very useful.

And, and without some tests. But then I think, you know, we have maybe one more month until advent of code so advent of code, if you guys don't know what that is, it's AOC testing.

Fun.

No, actually not fun, but something you have to learn. And yeah, testing is not fun, actually. But, you know, if you say something is not fun, it's always not going to be fun. Anyways, so, yeah, admin of code, we can. It's like an algorithm. Two algorithms a day and you get to unlock a picture.

Yes.

I started it last year, but I. I was so busy at the company that I. I dropped out in the middle of it. But basically.

Is real hard. Like insanely hard.

Actually, some of them are hard.

Here, let me see. I'm just going to open up the code that I was writing last year.

So we want to do that as a community. Like, it'll be a community event for that whole month.

I think I'm going to do it in a different language this year. Like.

Definitely me at 2023.

Have you guys done admin code before? I don't know how if you guys know about what that is.

Oh, I put it.

I put it in here.

I was at the company.

I was doing it with my homeboys at the comp, but we got busy. So I think I did eight days. So the day one. Can you guys see my screen?

Yeah. Okay.

But advent of code is kind of fun. There's always two parts of the algorithm. You get some kind of input text and you have to come out with a solution. So this one, let's just. Let's just do like this. I remember I did in Swift last year, but I don't know what happened to that code. But anyways.

Very fun.

Here's 2023. And here's like your prompt. So something is wrong. Blah, blah, blah, blah. The new. Yeah, you read it and you kind of have to understand it. And then you get past the first one, you get part two. So basically, you know, they'll give you some sample input. So.

Yeah, I'm not signed.

Am I signed in right now? I'm not sure. So play, please identify yourself. Okay, I'm not signed in, So I get. GitHub.

Is not.

Okay, Anyways, anyways, so you just write some code and it gives you an input and then it tells you if you're wrong or right. But.

Very creative.

This is the code that I wrote yesterday. It was some kind of, like, lines and I had to split it. And all this kind of stuff in part two was like, this.

Did not test my code here. I don't remember.

And then like, it gets a little bit Harder as you go. So this one was some kind of like rock, paper, scissors or something.

Right.

And I. That was like, my input here. I had to, like, find out how many points do people had at the end. So that was part two and day three. This is like part one or two. And they get. They get harder as you go a little bit. So.

Yeah, they're fun.

They're pretty fun.

Yeah.

But, yeah, like, you know, I know a lot of people reacted to that. You guys want like a leak code study session. But, yeah, we'll get. We'll get that going soon. So, like, nothing's ending. Just doing a new series, that's all.

Yeah.

Hey, Jacob. Let's do it in assembly this year. That'll be funny. You know, I heard. I don't know, webassembly is kind of. It's not. You don't have to use it on web. The other day I heard this, and.

It was quite funny.

But yeah, this is my code from last year.

It was pretty good. Yeah, it's quite.

Gets pretty difficult. This was like something with the directories.

And that's where. I think that's where I stopped.

All right.

Holy.

Yeah.

Anyways, what is everyone up to? Is everyone going to sleep now? Is nighttime, right?

Yeah, nighttime for a lot of people.

Yeah.

It's morning here.

I have to go to sleep.

But yeah, like, if you guys, like, it would really be helpful. If you guys have any ideas. Cool. For cool classes, how we can contribute to the community better, you know, just let us know.

That'd be great.

DM us because we have a lot of ideas on our own, but we really want to help you, you know? So, like, how can we help you? Just hit us up.

How many people do we have in here?

We got 10.

We have 10. I want to ask for a favor from them.

What?

What's the favor?

Hold on.

I want to ask them for a. Like on the new video.

Oh, yeah, please do that. Please.

Yeah, please.

It will help us greatly. Definitely. And this. This video is really helpful, actually, to be honest. This one's one of the Phil's best performances, in my opinion.

The new tech stack one. Yeah, see, like, I'm just gonna.

Wait, wait. I just. Crap. But I make it look like we don't.

We.

We're. We. Look here, man. We. Look. I am sorry. But look, this only has 5 likes. The new video. You see this?

Yeah. We're gonna double that right now.

I know. I don't like to ask for, like, too many favors or something like that, but if if it would be. It would be very thankful to us now.

Thank you. I appreciate that very much.

Thank you, brother. Appreciate. Appreciate it. Yeah. What's up with the. The likes these days, though?

I don't think we need to talk about much more, dude.

But it.

I think likes are very hard to get. Like, shares are easier to get. Recently, I think everyone.

Yeah.

Like, if you look. If you look on Instagram, you know what I mean? They. Yeah, they added the share feature. You know, how you share reels to people. So now the metric is really weird because shares used to be the lowest, but now shares like, it's like 10 times more than comments or likes recently.

It's really weird.

It's really. It's a different time.

I think so too.

It's like. It's like, I don't know, like some psyche where people don't need to. Because I think like. And comments kind of provide to like a whole bunch of other people. Right. Like, it's to whoever's using the platform. But then when you share something to someone, it's only like you guys can talk about it on your own. That's like what our Discord server kind of is, I guess.

Yeah. Right.

So I think that's a little bit of a. It's like the Internet and how people interact on the Internet is evolving recently. You know what I mean?

Yeah, people don't. I honestly, me personally too, though, I don't. I don't like anymore that much. But I should.

You know, I don't like, noticed.

I noticed myself, like, because I share. I share. I share with you.

Right.

Like a lot of reals, me and you feel right.

Yeah. But I mean, that's like the way we interact without really having to talk to each other.

Just hit.

Find this interesting or funny.

Yeah.

But sometimes I don't even watch it.

Watch the things that you sense.

Whoa.

Really?

I watched all of it. Dude, he sent me. Dude. It's kind of messed up.

I'm sorry.

It's okay. It's okay.

Damn.

But this is fun. I mean, if anyone wants to ask any questions, we're.

We're here.

But we have. Oh, everyone's still sticking around. I think this is a much better time than Sunday night.

Especially a little bit later. One hour late.

Yeah.

Like, this is good.

It's chewing.

Morelli's awake. It's not like 6am for him, you know.

Yeah, but he did miss his alarm today.

He did.

Really?

My man. It's okay. It happens.

It's okay. It's okay.

Anyways, Where's. Does anyone want any, like, you know, what do you think about like a code review day or something?

Yeah, code review days.

Nine likes.

Yeah, no excuse.

I think code review days would be kind of cool where you share your code and you present it and then we treat it like. Okay, here you are. This is what you need to do. A little bit more readable code. Thank you for. All right, later on, Kelvin.

All right, Calvin, thank you for sticking around.

But we're just trying, trying our, trying our best at this YouTube thing, you know.

We got some big things coming though.

We do, we do.

It's gonna take some time, but bear with us, boys and girls.

Is Jocelyn still here?

Yeah.

Nice.

No, she's not.

No, she just left. Yeah.

How about, how about we just do a code wars real quick? Yeah, just test run how it would. It would be right now. Is that okay with any of you?

Let's do it. You guys here, you guys want to do one? Yeah, let's do one real quick. So what I was thinking, this is, what this is my thinking is you find like a problem. That's good, Phil. And you solve it, right? And everyone else solves it with, with you. And then they post their solution at the same time that you do on the chat.

So this is Code Wars. If you guys want to join my clan, it's L, E, T, P, H, I, L, all lowercase lead fill.

Including.

At the listening to you also. I'm just here to.

What?

Okay. Oh, the died dude, this guy. Oh man, he told me. Anyways, so this is, this is code words. I don't know if you guys have seen this before. I like Code wars because it, it.

Feels like real a little bit like.

They gave me a prompt instead of like lead code. It's very like, you know, computer sciencey, a little bit very. Just like, you know, binary trees and nodes and link lists. But this one is a little bit, I feel like, is more real life tasks. But there's a lot of regular expression stuff here. But if you guys ever wanted to join my clan, just come here. And then I think what you do is you have to go to like view profile or account settings and then in the clan you just put let fill and we can all follow each other.

And let's just find one that are.

What Sounds fun. You guys see my screen?

Yeah, we see it.

Let me know if you guys see anything that's interesting. We're going to figure it out together, right? I think find a character that sounds interesting, right?

Right. All right, let's go.

Hopefully it's 96%.

Okay.

So.

All right.

When no more interesting guitar can be resolved, I just chose to create the new guitar to solve their own to enjoy the process.

Okay. That's the creator of this.

Okay. Given. Give you a character matrix. So a matrix equaling. You know, it's usually a 2D 2D array, but here they're just doing like a. So matrix is kind of like a grid, right? So they're. They're doing it by line breaks.

So.

Give you a character matrix. Find out the character which has the smallest amount.

Okay, so what.

What. What do you. What do we have to figure out right now? This is how I kind of take it. I write my notes.

So given.

Find character with smallest amount.

All right.

Is everyone still here? I mean, if this is not interesting, we don't have to do it.

No, everyone's still here.

Okay, cool. Cool. Yeah.

All right, arguments. A matrix. A string that contains some letters, each row separated by a line break.