English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 42 lectures (3h 52m) | 1.92 GB
Use Next JS & OpenAI to build a ChatGPT clone, including mongodb, edge functions, auth0, tailwind css + more! (Next v13)
Don’t get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects!
Welcome to the ultimate course on how to build your very own ChatGPT clone using the latest web development technologies!
In this course, you’ll learn how to create a powerful chatbot that uses the Next.js framework, OpenAI’s cutting-edge natural language processing technology, MongoDB for data storage, Auth0 for user authentication, and Tailwind CSS for beautiful, responsive styling.
Our expert instructors will guide you through every step of the development process, from setting up your development environment to deploying your finished chatbot to the web. You’ll learn how to create conversational interfaces, process user input, and generate natural language responses using OpenAI’s powerful language models.
With MongoDB, you’ll learn how to store and retrieve user data and chat history, while Auth0 will enable you to secure your application with user authentication and authorization. Finally, you’ll use Tailwind CSS to create a stunning user interface 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, our step-by-step approach and easy-to-follow instructions 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!
What you’ll learn
- Increase your value as a web developer by learning how to integrate AI
- 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
Table of Contents
Introduction
Introduction
Project setup
Udemy ratings reviews
Set up the chat route page
Authentication authorization with Auth0
Set up auth0 for authentication
Create auth api routes
Set up the login and logout state
Style the homepage with tailwind css
Implement signup functionality
Redirect to chat page if logged in
Build out the chat page
Create the basic chat page layout
Create the ChatSidebar component and add the logout link
Create the footer and message form
Build the OpenAI streaming functionality
Create an OpenAI API key
Create the sendMessage endpoint
Set up the OpenAI API call
Stream the OpenAI response on the front end
Create the Message component and display new messages in chat window
Finish implementing the Message component styles and logic
Protect the chat routes and pages so only logged in users can access
Add the loading state to the form
Refine the OpenAI prompt
Fix the footer form position and make chat window scrollable
Storing chats with MongoDB
Overview of edge functions
Set up MongoDB Atlas account
Set up the createChat endpoint
Test the createChat endpoint
Create the getChats endpoint
Render the list of chats in the sidebar
Style the chat list in the sidebar
Implement creating a chat in the sendMessage endpoint
Create the addMessageToChat endpoint
Navigate to newly created chat page
Reload chat list on route change
Load chat messages for a particular chat
Render chat messages for a particular chat
Modify the sendMessage endpoint to cater for existing chats
Implement conversation history in OpenAI
Deploy
Deploy to vercel
BONUS
Resolve the captcha to access the links!