Next.js & React with ChatGPT - Development Guide (2023)
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.
More
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 Next.js & React with ChatGPT - Development Guide (2023)
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 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 |
Similar courses to Next.js & React with ChatGPT - Development Guide (2023)
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux
React Summit 2024 - Amsterdam
Intro to Shopify App Development with React, Node & GraphQL
The React practice course, learn by building projects.
Working with React and Go (Golang)
Fullstack React with Typescript
React and NestJS: A Practical Guide with Docker
MERN Invoice Web App with Docker,NGINX and ReduxToolkit
