Next.js & React with ChatGPT - Development Guide (2023)
Course description
Throughout the course, you will gain experience developing a Next JS application from the ground up. Additionally, you'll receive instruction on integrating OpenAI's ChatGPT to create a chatbot application that enables users to ask the AI any questions about a specific technology stack, such as a library, framework, or programming language that will be taught in the course. The ultimate goal of the course is to equip you with the skills necessary to create a functional chatbot app.
A big portion of the course is preparing the application layout, improving user experience, and getting everything together from scratch. Every part of the course is skippable, with the option to download the version of the project from any stage of the course.
The course covers a text completion from OpenAI, mostly used for Chatbots. The course doesn't focus on covering every topic of chatGPT but rather provides a practical development guide on how to integrate the ai model into the Next JS application.
Read more about the course
What is Next.js?
Next.js is a React-based framework that provides infrastructure and simple development experience for server-side rendered(SSR) & static page applications.
An intuitive page-based routing system (with support for dynamic routes)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR), are supported on a per-page basis.
What is ChatGPT?
ChatGPT is a powerful AI language model created by OpenAI that can understand and respond to text inputs like a human. It has been trained on vast amounts of text data, making it a versatile tool for various language-based applications.
Watch Online
All Course Lessons (59)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 02:45 | |
| 2 | What to expect from the course | 03:31 | |
| 3 | How to resolve issues or skip lecture | 05:07 | |
| 4 | Init Project | 06:16 | |
| 5 | Tailwind init | 09:00 | |
| 6 | Center content | 05:53 | |
| 7 | Json data and assets | 06:57 | |
| 8 | Render Stacks | 10:26 | |
| 9 | Border hover classes | 05:45 | |
| 10 | Stack Page | 09:56 | |
| 11 | Adds header | 07:20 | |
| 12 | Message layout | 11:04 | |
| 13 | Textarea for prompt | 04:24 | |
| 14 | Move code to components | 07:30 | |
| 15 | Different classes for messages | 07:53 | |
| 16 | Handle prompt value | 09:22 | |
| 17 | Add messages | 07:32 | |
| 18 | Scroll to bottom | 04:46 | |
| 19 | Completion Api route | 05:49 | |
| 20 | Send data to Api | 10:16 | |
| 21 | Get response from request | 05:53 | |
| 22 | Add ai message | 06:02 | |
| 23 | Typewriter effect | 06:55 | |
| 24 | Blinking cursor | 06:22 | |
| 25 | Disable typewriter | 03:19 | |
| 26 | OpenAI Account + Api keys | 11:37 | |
| 27 | Completion API | 18:35 | |
| 28 | ChatGPT Params | 23:49 | |
| 29 | Debug config | 04:34 | |
| 30 | Make better prompt | 09:49 | |
| 31 | Hardcode response | 05:43 | |
| 32 | React markdown | 05:07 | |
| 33 | Code highlight | 15:12 | |
| 34 | Code cleanup | 05:48 | |
| 35 | Use Effect Fix | 01:48 | |
| 36 | Fix typewriter styles | 03:38 | |
| 37 | Session keys | 07:06 | |
| 38 | Set active session | 03:23 | |
| 39 | Init iron sessions | 08:34 | |
| 40 | Api endpoint to store session | 04:59 | |
| 41 | Storing user in session | 08:43 | |
| 42 | Retrieve user in Post endpoint | 05:04 | |
| 43 | Fetch user client side | 06:39 | |
| 44 | Move fetch user to hook | 04:13 | |
| 45 | Display uid in ui | 01:22 | |
| 46 | Set active session on reload | 02:07 | |
| 47 | Select default session | 03:24 | |
| 48 | Init lowDb | 13:45 | |
| 49 | Cache DB | 05:57 | |
| 50 | Store message history | 11:10 | |
| 51 | Save data to DB | 07:48 | |
| 52 | Feed history to chatGPT | 05:14 | |
| 53 | Message history memory size | 06:35 | |
| 54 | Clear history on chat enter | 10:10 | |
| 55 | Different bots | 08:48 | |
| 56 | Handle case when no messages | 02:18 | |
| 57 | Github repo | 08:53 | |
| 58 | Deploy app to vercel | 06:14 | |
| 59 | Store in-memory & Course Finish | 08:40 |
Unlock unlimited learning
Get instant access to all 58 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
React, NextJS and NestJS: A Rapid Guide - Advanced
Classic React
React Router v4
Next40. Master Next.js 14 in 40 days of epic projects
