IIRF Online > 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) by Udemy
Use Next JS + OpenAI to build a ChatGPT clone, incl. mongodb, edge functions, auth0, tailwind css + more! (Next JS v13)
Course Highlights
- 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!
Skills you will learn!
Curriculum
5 Topics
Important! Read this before you start the course! (Github repo etc)
Introduction
Project setup
Udemy ratings & reviews
Set up the chat route / page
6 Topics
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
3 Topics
Create the basic chat page layout
Create the ChatSidebar component and add the logout link
Create the footer and message form
11 Topics
Create an OpenAI API key
ISSUES WITH OPENAI
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
15 Topics
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
5 Topics
Fix streaming on wrong chats
Auto-scroll when there's an incoming message
Add Google font for our app
Add missing styles for homepage
Add UI for new chat
4 Topics
Validate chat id for chat id page
Add validation to sendMessage endpoint
Add validation to createNewChat endpoint
Add validation to addMessageToChat endpoint
2 Topics
Deploy to vercel
BONUS!
Next JS ChatGPT clone with Next.JS & OpenAI (NextJS 13 2023)
Related Next.js Courses
Thank You!
Your review has been submitted successfully.