Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Next.js
Next JS ChatGPT clone with Next.JS & OpenAI (NextJS 13 2023)

Next JS ChatGPT clone with Next.JS & OpenAI (NextJS 13 2023)

Loại khoá học: Web Development

Use Next JS & OpenAI to build a ChatGPT clone, incl. mongodb, edge functions, auth0, tailwind css + more! (Next JS v13)

image
50.000 VND
1.399.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

Don't get left behind! Increase your value as a web developer today by learning how to build AI powered web apps!

THIS COURSE WILL BE GOING THROUGH A COMPLETE UPDATE TOWARDS THE END OF 2023 TO USE THE NEXT JS 13 APP DIRECTORY.

Welcome to the ultimate course on how to build your very own ChatGPT clone!

In this course, you'll learn how to create "Chatty Pete", a powerful chatbot with the same capabilities as ChatGPT, that uses Next.js v13, OpenAI's GPT API, Next JS edge functions to stream chat responses, MongoDB for data storage, Auth0 for user authentication and user accounts, and Tailwind CSS for beautiful layouts and styling. We'll end the course by deploying our app live to production, hosted on Vercel.

You will be guided through every step of the development process, from setting up your Next JS development environment to deploying your finished ChatGPT chatbot clone to the web using Vercel. You'll learn how to create conversational interfaces, process user input, and generate natural language responses using OpenAI's powerful ChatGPT language models. You'll also learn how to utilise Next JS edge functions to stream data back from the OpenAI API, exactly the same as how ChatGPT does it!

With MongoDB, you'll learn how to store and retrieve chat history, while implementing Auth0 within your Next JS app will enable you to add user accounts and secure your application with user authentication and authorization. Finally, you'll use Tailwind CSS to create a stunning user interface within Next JS that looks great on any device.

This course is perfect for developers who want to expand their skillset and learn how to build complex web applications using the latest technologies. Whether you're a seasoned web developer or just starting out, the step-by-step approach and easy-to-follow instructions in this ChatGPT clone course with Next.js will help you master the skills you need to build your very own ChatGPT clone.

So why wait? Sign up now and start building your own ChatGPT clone today!

Bạn sẽ học được gì

Increase your value as a web developer by learning how to build AI powered apps

Build a ChatGPT clone with OpenAI and Next JS

Implement user accounts in your Next JS apps with Auth0

Style your Next JS apps with Tailwind CSS

Store chat history for your ChatGPT clone with MongoDB

Deploy to production using Vercel and utilise edge functions to stream data back from OpenAI, just like ChatGPT!

Yêu cầu

  • Basic understanding of React is required - everything else is covered!

Nội dung khoá học

8 sections

Introduction

5 lectures
Important! Read this before you start the course! (Github repo etc)
00:56
Introduction
01:34
Project setup
07:20
Udemy ratings & reviews
00:38
Set up the chat route / page
06:22

Authentication & authorization with Auth0

6 lectures
Set up auth0 for authentication
04:53
Create auth api routes
03:42
Set up the login and logout state
05:15
Style the homepage with tailwind css
07:08
Implement signup functionality
02:26
Redirect to chat page if logged in
03:58

Build out the chat page

3 lectures
Create the basic chat page layout
06:07
Create the ChatSidebar component and add the logout link
02:41
Create the footer and message form
10:53

Build the OpenAI streaming functionality

11 lectures
Create an OpenAI API key
01:42
ISSUES WITH OPENAI
01:42
Create the sendMessage endpoint
04:02
Set up the OpenAI API call
05:00
Stream the OpenAI response on the front end
06:01
Create the Message component and display new messages in chat window
09:27
Finish implementing the Message component styles and logic
07:43
Protect the chat routes and pages so only logged in users can access
05:28
Add the loading state to the form
04:11
Refine the OpenAI prompt
05:13
Fix the footer form position and make chat window scrollable
01:59

Storing chats with MongoDB

15 lectures
Overview of edge functions
07:00
Set up MongoDB Atlas account
08:16
Set up the createChat endpoint
10:29
Test the createChat endpoint
04:33
Create the getChats endpoint
08:13
Render the list of chats in the sidebar
05:07
Style the chat list in the sidebar
06:13
Implement creating a chat in the sendMessage endpoint
05:42
Create the addMessageToChat endpoint
10:52
Navigate to newly created chat page
05:21
Reload chat list on route change
06:01
Load chat messages for a particular chat
05:01
Render chat messages for a particular chat
05:15
Modify the sendMessage endpoint to cater for existing chats
10:51
Implement conversation history in OpenAI
09:58

UI Updates

5 lectures
Fix streaming on wrong chats
06:22
Auto-scroll when there's an incoming message
03:29
Add Google font for our app
04:53
Add missing styles for homepage
04:28
Add UI for new chat
04:48

Validation

4 lectures
Validate chat id for chat id page
04:02
Add validation to sendMessage endpoint
03:01
Add validation to createNewChat endpoint
02:07
Add validation to addMessageToChat endpoint
07:41

Deploy

2 lectures
Deploy to vercel
09:18
BONUS!
00:48

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
Angular - The Complete Guide (2024 Edition)

Angular - The Complete Guide (2024 Edition)

120 VND
50.000 VND
.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

100 VND
50.000 VND
Unreal Engine 5: The Complete Beginner's Course

Unreal Engine 5: The Complete Beginner's Course

1.899.000 VND
50.000 VND
Complete WordPress Developer Course 2023 - Plugins & Themes

Complete WordPress Developer Course 2023 - Plugins & Themes

1.999.000 VND
50.000 VND
The Data Science Course: Complete Data Science Bootcamp 2024

The Data Science Course: Complete Data Science Bootcamp 2024

140 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi