An Overview of the First Application

00:00 Before we get into building the app, let's have a quick look at what the app actually is so we know what we're building. So this is our ChatGPT application. It's an authenticated app, so you actually have to log in in order to use it. So let's log in first. We use the open source NextAuth library to manage our login.

00:17 So in this case, we're going to log in through GitHub, but you can choose one of many different providers including using a database with your own emails and passwords. But let's go and use GitHub because, well, everybody has GitHub, so let's sign in. Now we can see up here that I've logged in, and this is the home page. This is what you actually log in to.

00:35 So over here is my list of saved chats with ChatGPT, and then down here is my input field where I can start a new chat with ChatGPT. So let me try that. I'll hit return, and then I also get forwarded to the chat detail page, which is another

00:54 route, and here I get the transcript of the chat that I've been having with ChatGPT, but I also get a menu of all of the different chats that I've had over time in a parallel route on the side. So let's go click on one of those, and then we go to that route with that chat. There's also one last route, which is the About route, which has an About Us page.

01:12 Finally, I can sign out, and then I'm back to the beginning again. Now what you're looking at here is deployed to localhost, but we'll also be deploying to Versal step-by-step, and so you'll see a full CI/CD flow as we go. So what are we going to be learning in this getting started? Well, we're going to be starting with the fundamentals of Next.js, like file-based routing

01:32 and how that works, client and server components, we're going to dig in there, we're going to look at server actions as well, and then we're going to get into advanced topics like streaming and parallel routes, and this will give you a taste of what the App Writer is truly capable of. I can't wait to get started, so let's jump right in.

00:00 Before we get into building the app, let's have a quick look at what the app actually is so we know what we're building. So this is our ChatGPT application. It's an authenticated app, so you actually have to log in in order to use it. So let's log in first. We use the open source NextAuth library to manage our login.

00:17 So in this case, we're going to log in through GitHub, but you can choose one of many different providers including using a database with your own emails and passwords. But let's go and use GitHub because, well, everybody has GitHub, so let's sign in. Now we can see up here that I've logged in, and this is the home page. This is what you actually log in to.

00:35 So over here is my list of saved chats with ChatGPT, and then down here is my input field where I can start a new chat with ChatGPT. So let me try that. I'll hit return, and then I also get forwarded to the chat detail page, which is another

00:54 route, and here I get the transcript of the chat that I've been having with ChatGPT, but I also get a menu of all of the different chats that I've had over time in a parallel route on the side. So let's go click on one of those, and then we go to that route with that chat. There's also one last route, which is the About route, which has an About Us page.

01:12 Finally, I can sign out, and then I'm back to the beginning again. Now what you're looking at here is deployed to localhost, but we'll also be deploying to Versal step-by-step, and so you'll see a full CI/CD flow as we go. So what are we going to be learning in this getting started? Well, we're going to be starting with the fundamentals of Next.js, like file-based routing

01:32 and how that works, client and server components, we're going to dig in there, we're going to look at server actions as well, and then we're going to get into advanced topics like streaming and parallel routes, and this will give you a taste of what the App Writer is truly capable of. I can't wait to get started, so let's jump right in.