Next.js & React with ChatGPT - Development Guide (2023)

7h 6m 49s
English
Paid

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 59 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Next.js & React with ChatGPT - Development Guide (2023)

0:00
/
#1: Introduction

All Course Lessons (59)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Building a Full-stack Multilingual Blog with Next.js 13.4

Building a Full-stack Multilingual Blog with Next.js 13.4

Sources: udemy
Are you looking to build a modern, full-stack blog with the latest technologies? Look no further than this comprehensive Udemy course, which will guide you thro
9 hours 15 minutes 4 seconds
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Sources: udemy
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to
28 hours 38 minutes 19 seconds
NFT Marketplace in React, Typescript & Solidity - Full Guide

NFT Marketplace in React, Typescript & Solidity - Full Guide

Sources: udemy
The course covers everything you need for a decentralized NFT application according to the ERC721 standard. Students of this course will learn about NFTs by creating a real-worl...
16 hours 20 minutes 55 seconds
Build a Spotify Connected App

Build a Spotify Connected App

Sources: fullstack.io
Learn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.
3 hours 47 minutes 28 seconds
Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Sources: udemy
Dive into the world of frontend development with this comprehensive Shadcn UI course, tailored for developers eager to craft state-of-the-art dashboards...
8 hours 12 minutes 38 seconds