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

Focused View

Eincode by Filip Jerga,Filip Jerga

7:05:45

94 View

1. Introduction

1. Introduction.mp4

02:44

2. What to expect from the course.mp4

03:29

3. How to resolve issues or skip lecture.mp4

05:06

2. Layout Preparation

1.1 Code.html

1.2 Complete Project.html

1. Init Project.mp4

06:15

2.1 Code.html

2. Tailwind init.mp4

08:59

3.1 Code.html

3. Center content.mp4

05:52

4.1 Code.html

4.2 Logos.zip

4. Json data and assets.mp4

06:56

5.1 Code.html

5. Render Stacks.mp4

10:25

6.1 Code.html

6. Border hover classes.mp4

05:44

7. Code Exercise.html

8. Quiz.html

3. Stack Page

1.1 Code.html

1. Stack Page.mp4

09:54

2.1 Code.html

2. Adds header.mp4

07:19

3.1 Code.html

3. Message layout.mp4

11:03

4.1 Code.html

4. Textarea for prompt.mp4

04:23

5.1 Code.html

5. Move code to components.mp4

07:29

6.1 Code.html

6. Different classes for messages.mp4

07:52

7.1 Code.html

7. Handle prompt value.mp4

09:21

8.1 Code.html

8. Add messages.mp4

07:31

9.1 Code.html

9. Scroll to bottom.mp4

04:45

10. Code Exercise.html

11. Quiz.html

4. Completion API Route

1.1 Code.html

1. Completion Api route.mp4

05:48

2.1 Code.html

2. Send data to Api.mp4

10:15

3.1 Code.html

3. Get response from request.mp4

05:52

4.1 Code.html

4. Add ai message.mp4

06:01

5.1 Code.html

5. Typewriter effect.mp4

06:54

6.1 Code.html

6. Blinking cursor.mp4

06:21

7.1 Code.html

7. Disable typewriter.mp4

03:18

8. Code exercise.html

9. Quiz.html

5. OpenAI - ChatGPT

1.1 Code.html

1. OpenAI Account + Api keys.mp4

11:36

2.1 Code.html

2. Completion API.mp4

18:33

3. ChatGPT Params.mp4

23:48

4.1 Code.html

4. Debug config.mp4

04:33

5.1 Code.html

5. Make better prompt.mp4

09:48

6.1 Code.html

6. Hardcode response.mp4

05:42

7. Quiz.html

6. Markdown

1.1 Code.html

1. React markdown.mp4

05:05

2.1 Code.html

2. Code highlight.mp4

15:11

3.1 Code.html

3. Code cleanup.mp4

05:47

4.1 Code.html

4. Use Effect Fix.mp4

01:47

5.1 Code.html

5. Fix typewriter styles.mp4

03:37

6. Quiz.html

7. Sessions - Cookies

1.1 Code.html

1. Session keys.mp4

07:04

2.1 Code.html

2. Set active session.mp4

03:22

3.1 Code.html

3. Init iron sessions.mp4

08:33

4.1 Code.html

4. Api endpoint to store session.mp4

04:58

5.1 Code.html

5. Storing user in session.mp4

08:42

6. Code exercise.html

7. Quiz.html

8. Get User

1.1 Code.html

1. Retrieve user in Post endpoint.mp4

05:03

2.1 Code.html

2. Fetch user client side.mp4

06:38

3.1 Code.html

3. Move fetch user to hook.mp4

04:12

4.1 Code.html

4. Display uid in ui.mp4

01:21

5.1 Code.html

5. Set active session on reload.mp4

02:06

6.1 Code.html

6. Select default session.mp4

03:23

7. Code Exercise.html

9. Message History

1.1 Code.html

1. Init lowDb.mp4

13:44

2.1 Code.html

2. Cache DB.mp4

05:56

3.1 Code.html

3. Store message history.mp4

11:09

4.1 Code.html

4. Save data to DB.mp4

07:47

5.1 Code.html

5. Feed history to chatGPT.mp4

05:13

6.1 Code.html

6. Message history memory size.mp4

06:34

7.1 Code.html

7. Clear history on chat enter.mp4

10:09

8.1 Code.html

8. Different bots.mp4

08:47

9.1 Code.html

9. Handle case when no messages.mp4

02:17

10. Code exercise.html

11. Quiz.html

10. Deployment

1. Github repo.mp4

08:52

2. Deploy app to vercel.mp4

06:13

3.1 Code.html

3. Store in-memory & Course Finish.mp4

08:39

Description

Build ChatGPT integration with Next.js & React to build an AI-powered chatbot for learning coding. All with javascript!

What You'll Learn?

Learn to integrate ChatGPT to Next JS app
Get an understanding on how to use ChatGPT in the code
Use Next JS to create an AI chat app
Establish yourself in the field of the AI Web Development

Who is this for?

Anybody interested in how to integrate ChatGPT AI model into Web App

People looking for a practical development guide

This course is for everyone eager to understand how to build an app from scratch

What You Need to Know?

Base knowledge of Next JS or React JS

More details

Description
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.

What are you going to work on?
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.

The course can be briefly summarized in these points:

Layout preparationÂ - Several lectures are provided to prepare the application layout, with everything built from scratch. Each lecture is optional and can be skipped.
Components - Code parts are organized into components for better management.
APIÂ Route -An API route is established to handle user queries and provide ChatGPT's response.
ChatGPT - ChatGPT is initially integrated with a simple setup.
ChatGPT parameters - The parameters that influence AI decisions are explained.
Markdown - The response generated by ChatGPT is formatted in Markdown.
Sessions - Although the course doesn't cover authentication, different user scenarios are simulated using sessions/cookies.
In-memoryÂ DB - The application uses lowDB as an in-memory database for data storage.
AIÂ memoryÂ - Chat history is stored in an in-memory database, enabling the AI model to access more context.
Personalize AI - Each chatbot has a unique personality and specific knowledge of a framework.
Deployment - The application will be deployed on Vercel.
While working on the features above, the students will learn and understand ChatGPT features and parameters. They will know how to architecture applications and will be able to create their applications with Next JS and ChatGPT integration.
Who this course is for:
Anybody interested in how to integrate ChatGPT AI model into Web App
People looking for a practical development guide
This course is for everyone eager to understand how to build an app from scratch

User Reviews

Rating

average 0

Total votes0

Focused display

Eincode mission is to provide the best online learning experience for its audience.High-quality content and programming concepts explained in real-life projects are fields where Eincode shines!Eincode covers mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides, then Eincode is the right choice.Instructor Filip Jerga also publishes courses.Cheers & Keep Coding!

Filip Jerga

Instructor's Courses

My name is Filip Jerga, and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on various technologies and projects, from C++ development for ultrasound devices to modern mobile and web applications in React and Angular.Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort into explaining web and software engineering concepts straightforwardly, hands-on, and understandable.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.