Transcript from the "Dashboard Home Page" Lesson
[00:00:00]
>> Auth is cool, but like I said, it's really hard, it's so hard. But I think Next.js makes it easy in my opinion. It's still hard to think about, but it does make it easy. Okay, so now, that 404 we got for the home page, let's have it, so it's not a 404 anymore, so let's finally fix it.
[00:00:20] Here I just have the code for the homepage where it's pretty much just the layout, there really isn't anything in here. At this point, it's just HTML with some tailwind CSS. And then we're gonna go and we're gonna fill all the dynamic bits that go into it. So just to give you a reminder what the homepage looks like, I'm gonna run the complete app here.
[00:00:45] So basically this is the homepage, we have this dynamic greeting card. This thing loads in from the server and it needs access to your name, right, because how else would it know your name? So it has to figure out how to get your name, it needs data. So this is probably gonna be a server component.
[00:01:06] All these projects here load up, they're clickable. You can go to a project page and you can also create a new project like this. This is on the client side, so this is probably a client component, right? And then we have this task list here that just shows you all your tasks.
[00:01:19] And If you click on one of these projects, it should take you to where you can see all the tasks for that one project. All this other stuff here, we will not be doing, this is no way we're gonna get all this stuff done. I don't even know what these are gonna be for.
[00:01:29] I just put icons there and it's like, you guys can go crazy on whatever you want that to be. This could be all your tasks plotted on the calendar. This could be all the settings for your accounts, and this could be the settings for the app. I think that's what the intention was.
[00:01:43] But for the most part, we're just gonna focus here. And the reason I kinda did it this way is because each one of these has a different rendering mode and a different technique for fetching data and a different technique for loading, each one. And they're all gonna be on the same page, which I think is so powerful.
[00:02:00] So that's why we're gonna walk you through like this. So if you go to the notes, like I said, you can just pretty much copy this, there's literally nothing going on here. If you look at it, there's no interpolation anywhere, there's no handlers anywhere. It's basically just HTML and CSS for this homepage here, so feel free to just copy this and paste it, there's nothing special going on here.
[00:02:26] So that will be inside of app, dashboard, home, page.tsx, that's what that's for. So this should be good. I have this import up here for a delay inside of a file called async. We haven't made it, so we can make it now. But basically it's a file that I made to just delay API calls so we can overexaggerate how long it would take to get data, so we can actually see a loading state.
[00:03:00] So I'm just gonna go ahead and make that right quick inside a lib, call it async, export const delay, Takes in some time, returns a Promise, That has a callback and resolves, and it just does a setTimeout for that set amount of time. And it just resolves literally anything, we're never gonna use it.
[00:03:35] So that way, we can just actually see the loading states, because I think it's really cool to see things pop in whenever they're ready while other stuff is rendering. So we'll have to slow things down to be able to see that on local host, so that's why I have that.
[00:03:49] Okay, there we go. And why is this, yeah, I guess it's just lagging behind. I don't know why I can't find it, but I'll just comment it out until we use it. Okay, so now we have our page here. If you go here, you should see something, so let's see, which am I on?
[00:04:13] I'm on here, so we gonna go to /home, and it should look like this, with nothing on it. I actually have a different gradient color for the home. If you want it, you can apply it. I think that one's called candy-mesh, cuz I was eating candy when I made it.
[00:04:33] [LAUGH] You could apply it to the dashboard layout. Instead of rainbow-mesh, you could play candy-mesh, you can get that one. And it looks like that, if you just want it to be different. And these meshes are called, yeah, they're called meshes, they're just a bunch of radial gradients.