Course App Review

[00:00:00]
>> I guess one note I wanted to talk about is kind of just deploying so we're gonna use a vercel, i don't know if you pronounce it vercel or vercel but I think it's vercel, cuz I talked to them a lot and they always say vercel. So I'm gonna say vercel, we're gonna be using vercel for deploying mainly because the team at vercel are the people that create an Next.js as well, so we're gonna be using them.

[00:00:21]
But I also wanted to note that since last I talked about deploying with Next.js, Netlify and the team of Netlify has done a really good job of adding support for Next.js. And here's a link here that you can click on where they will show you how to do that It's really impressive work, so more and more providers are coming online and supporting next.js.

[00:00:41]
So I think that just kind of shows, you know just how much pool Next.js as start to have on the ecosystem, so pretty, pretty nice. But yeah, we'll get more into deploying later, this is just kind of like an intro to that and a little update to what I said before.

[00:00:58]
All right, let's walk through this app, let's actually see what we're gonna be doing, okay? So what I want you to do is go ahead and if you haven't already is just clone the actual app. So whatever your flavor is, if you use SSH, like me or HTTPS, or apparently GitHub has a COI now that you can clone things.

[00:01:18]
I've never used that before, but that seems legit, I guess we'll look into that, I wonder what else that seal I can do. But yeah, they have a COI option now, but anyway, clone it, and then obviously, don't forget to install your modules. How many times have you pulled down a repo or I don't know rebased a branch or whatever.

[00:01:35]
And you go run and you're like, this doesn't work. This is stupid. And then you go hit up someone in your company and they're like, did you install the modules? [LAUGH] You're like, duh, but you know you didn't. [LAUGH] Yeah, that happens all the time. It happens all the time to me.

[00:01:53]
So, installing modules, I got to the point where I'll just add hooks using like Husky in my package, Jason that, post Pull post rebase whatever it is automatically installed. That way I don't forget it. So, pro tip, add some posts, you know rebase post merge hooks to automatically install your stuff.

[00:02:14]
Yeah, so it's kind of want to walk you through all the stuff that's here. So like I said, this is an app that's already built out. It's most of the UI, not all the UI stuff is done so we won't be having to work with any of that.

[00:02:29]
It's just not ready for production. Like I said, some things are missing, some things aren't complete, some things just weren't even thought of, so that's our job as the team leader to come in here and get this thing ready for production. And then we get to go home at noon, right?

[00:02:44]
So [LAUGH] that's what we're gonna do. And, you know, we collect the big checks for that. So, basically just a tour of what's going on here. We have a components directory, like I said, you can feel free to walk through here if you want to. We won't be working out of this directory, like I said, I literally built a full app.

[00:03:02]
My attempt have a notion clone wiki clone. So there's a lot of components in there. You know, feel free to go in there and see what I'm doing. I don't think I'm doing anything parrticularly special in there. Check it out. We have this db folder here that we'll get to when we talk about a database.

[00:03:19]
But you can look through here if you want to, a lot of crazy things happening, It's called db, so you could probably guess what it's gonna be used for. But if you look at the files and stuff, they're basically like no op functions that don't do anything. So we're gonna have to make those functions do something at some points.

[00:03:35]
And then we have a middleware. Middleware is the equivalent of like middleware you would have on an express server. Most of this is already done for you. I left this in here completed because honestly, there just wasn't enough time to actually cover implementing the middle where to now just didn't think it was gonna be that beneficial because it's actually quite simple.

[00:03:57]
So middleware, we'll be using a set of our API routes. Pages, let's take a look at pages. So our app is basically three parts, like an app you have real life so you have your landing page and all that static stuff right? The pricing page your about us to talk about how good your culture is?

[00:04:15]
And how you all like dogs and stuff like that. And then you have the second part which is like your blog. So if you haven't put your company's blog on medium you probably have it on your site maybe for your change log on there to something like stripe.

[00:04:28]
So that's the second part. And then the third part is everything that's behind signed in. So the actual app. So our next day S app, our app here is going to have all three of those parts. It's going to have the landing page material, it's going to have a blog, and it's also going to have a sign in experience with the actual app is, and just one framework where one app that's pretty powerful.

[00:04:47]
I'm a big fan of that because I mean, it was kind of like that, you know 2012 2013 people did that. But it wasn't this way, It wasn't with like, you know, server side rendered react and stuff like that it was more with like, ejs, or handlebars or something like that.

[00:05:06]
Right? It was it was a little different. It wasn't client side, it was either a spa or it was server side static, it wasn't both. So it's a little different. And it definitely wasn't using like server less and stuff like that. So kind of like we're like moving full circle now back to what we used to have which is better technologies rethought, so pretty crazy to develop that way.

[00:05:27]
But yeah, so we have a blog here, we have a signing page index page. And then we have the actual app here, which is the sign in experience. And of course, eventually we'll add an API stuff because this is going to cover full stack and authentication and database access and all types of stuff.

[00:05:46]
So we'll add some API routes in here as well. Posts, this is gonna be a folder of MDX files. If you don't know what MDX is it's just markdown that allows you to use react components inside of it. We won't be actually using any react components inside of MDX because there's really no value of that.

[00:06:03]
In this course, but it's set up to where you can do. It will just be used in regular markdown, public folders, just whatever was scaffold here from Next.js, with some images that are added, we won't be working in here. And then the styles is just some global styles that I added and then I have this utils folder, which just has some utility functions in here.

[00:06:22]
I'm using some random gradient generator to get some gradients and then a function to check if we're on server side or not, by checking the type of window which is honestly as hacky as it looks, this is the most legitimate way to check if you're on the server or not, so use that.

[00:06:39]
I promise you, it works. Other than that you pretty much just got your standard eslintcc setup and things like that. This is a TypeScript app. So the reason I made it TypeScript is so we can get autocomplete so we can move faster. If you don't want to use any of that stuff, just put any.

[00:06:57]
[LAUGH] Just put any, it's all good. But I added it so you can move faster, specifically. And that's it, that's just a tour of the app. Again, the app is called known, so yeah, that's basically it. So what we'll do is we'll start it, and because it's a Next.js app, we should be able to just run yarn dev.

[00:07:18]
So we're gonna run yarn dev. We're gonna open this up, and it shouldn't be broken. Let's see. Cool, so if you load it up, you'll see something like this. You'll see we're on our static site or landing page. Got some really horrible copy in here that we would like I said this, this wasn't ready for production.

[00:07:41]
They didn't do a good job, right? They got the UI, right? I mean, this logo was clean, right? But they didn't get everything right. This isn't this is not ready for our users. So we really need to just this whip it up, and that's what we're gonna be doing.

[00:07:53]
We're gonna do that, so you'll see this default title here, if you click on blog, Blog works but there's just no blog posts here. So you're not gonna see anything. If you try to actually go to an actual blog. It most likely will break. So, yeah, it'll break there intentionally because this is not there.

[00:08:11]
There was some blog posts it finally loaded up. So yeah, obviously there's some issues here and we need to fix them. And if you try to actually sign up, you click the sign up button, you go to the sign in here, you try to log in with GitHub, it literally doesn't do anything.

[00:08:23]
It doesn't even do anything, you can click it all day. So yeah, we got some work here, so let's dive right in.