Hi and welcome to this course on building a full-stack AI application using NextJs. In this course, we’ll start from the ground up and learn how NextJs works. We’ll learn how to work on both the front- and back-end and how to create our own APIs, topping it off by integrating ChatGPT into our project to build a cool AI application.
By the end of this course, you’ll have a functional full-stack NextJs application hosted on the internet that you can show off. You’ll also have a solid understanding of how to build a full-stack application using NextJs and how to integrate AI into your projects.
- In part 1 we will learn how to get started with NextJs, covering the setup process and the basics of NextJs.
- Part 2 deals with layouts, routing, and creating multiple pages so we can navigate between them.
- In part 3 we go over connecting to an API and fetching and displaying data from it. We’ll also take a look at React State and useEffect, and creating our own APIs.
- Part 4 is all about applying React State, calling our own API, and getting ChatGPT set up in our project.
- In part 5 we’ll finish up the first version of the Blockbuster chat app applying all that we learned on our own full-stack website.
- Part 6 will get started on an upgraded version of the AI app we built, adding a message history and the ability to ask multiple questions. We’ll also learn how to easily level up the styling of our components.
- In part 7 we’ll finish up the Blockbuster chat V2, adding autoscrolling, and learning about useRef and proper React State updates, and mapping our ChatBubble component on the page.
- Part 8 will have us integrating the OpenAI DALL-E-3 image generation API and giving an avatar to our Blockbuster chat V3, for the final version of this project.
- Finally, what good is a website if no one can see it? In part 9 we’ll give our project a Git repository, upload it to Github, and then deploy it using Vercel (all free accounts).
I hope you’re as excited as I am to get started. Let’s dive in!