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

Focused View

Tom Phillips,WebDevEducation Support

3:51:53

79 View

1 - Introduction

1 - Introduction.mp4

01:34

2 - Project setup.mp4

07:20

3 - Udemy ratings reviews.mp4

00:38

4 - Set up the chat route page.mp4

06:22

2 - Authentication authorization with Auth0

5 - Set up auth0 for authentication.mp4

04:53

6 - Create auth api routes.mp4

03:42

7 - Set up the login and logout state.mp4

05:15

8 - Style the homepage with tailwind css.mp4

07:08

9 - Implement signup functionality.mp4

02:26

10 - Redirect to chat page if logged in.mp4

03:58

3 - Build out the chat page

11 - Create the basic chat page layout.mp4

06:07

12 - Create the ChatSidebar component and add the logout link.mp4

02:41

13 - Create the footer and message form.mp4

10:53

4 - Build the OpenAI streaming functionality

14 - Create an OpenAI API key.mp4

01:42

15 - Create the sendMessage endpoint.mp4

04:02

16 - Set up the OpenAI API call.mp4

05:00

17 - Stream the OpenAI response on the front end.mp4

06:01

18 - Create the Message component and display new messages in chat window.mp4

09:27

19 - Finish implementing the Message component styles and logic.mp4

07:43

20 - Protect the chat routes and pages so only logged in users can access.mp4

05:28

21 - Add the loading state to the form.mp4

04:11

22 - Refine the OpenAI prompt.mp4

05:13

23 - Fix the footer form position and make chat window scrollable.mp4

01:59

5 - Storing chats with MongoDB

24 - Overview of edge functions.mp4

07:00

25 - Set up MongoDB Atlas account.mp4

08:16

26 - Set up the createChat endpoint.mp4

10:29

27 - Test the createChat endpoint.mp4

04:33

28 - Create the getChats endpoint.mp4

08:13

29 - Render the list of chats in the sidebar.mp4

05:07

30 - Style the chat list in the sidebar.mp4

06:13

31 - Implement creating a chat in the sendMessage endpoint.mp4

05:42

32 - Create the addMessageToChat endpoint.mp4

10:52

33 - Navigate to newly created chat page.mp4

05:21

34 - Reload chat list on route change.mp4

06:01

35 - Load chat messages for a particular chat.mp4

05:01

36 - Render chat messages for a particular chat.mp4

05:15

37 - Modify the sendMessage endpoint to cater for existing chats.mp4

10:51

38 - Implement conversation history in OpenAI.mp4

09:58

6 - Deploy

39 - Deploy to vercel.mp4

09:18

40 - BONUS.html

Description

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

What You'll Learn?

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!

Who is this for?

React developers who want to increase their value as a developer by learning how to create SAAS products and start leveraging the power of AI

What You Need to Know?

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

More details

Description
Don't get left behind! Increase your value as a web developer today by learning how to build AI powered web apps!
PLEASE NOTE - The Next JS app directory is NOT used in this course, but the course WILL be updated to use the app directory once all libs support it
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!
Who this course is for:
React developers who want to increase their value as a developer by learning how to create SAAS products and start leveraging the power of AI

User Reviews

Rating

average 0

Total votes0

Focused display

Tom Phillips has been developing front end web and mobile apps in the United Kingdom for numerous years. In that time he has had to prepare and teach multiple courses on the latest cutting edge front end web frameworks to junior developers, as well as mentor them during their early days as junior developers. Through doing this, Tom found efficient methods to teach and break down common complex problems that many developers face when trying to get started with new frameworks, especially in such a rapidly changing field as front end web development. Now he's applying those methods to his Udemy courses!Way back when Tom himself was a junior developer, he was fortunate enough to have been mentored by experts in the field. This allowed him to rapidly progress in his career and understand and architect multiple large projects in his time as an expert front end developer. Now Tom is passing on the buck and sharing his knowledge. Get the same mentoring that Tom received by enrolling on one of his courses and fast-track your understanding and knowledge in front end web development.

WebDevEducation Support

Instructor's Courses

Tom has been a web developer for over a decade. He created WebDevEducation to provide courses that provide you with the skills to increase your value as a front end developer by improving your web development skills. Learn popular web development libraries and frameworks with Tom to get ahead of the competition!(TOMPHILL LTD - 09531652)

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.