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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Important! Read this before you start the course! (Github repo etc)

Lecture 2: Introduction

Lecture 3: Project setup

Lecture 4: Udemy ratings & reviews

Lecture 5: Set up the chat route / page

Chapter 2: Authentication & authorization with Auth0

Lecture 1: Set up auth0 for authentication

Lecture 2: Create auth api routes

Lecture 3: Set up the login and logout state

Lecture 4: Style the homepage with tailwind css

Lecture 5: Implement signup functionality

Lecture 6: Redirect to chat page if logged in

Chapter 3: Build out the chat page

Lecture 1: Create the basic chat page layout

Lecture 2: Create the ChatSidebar component and add the logout link

Lecture 3: Create the footer and message form

Chapter 4: Build the OpenAI streaming functionality

Lecture 1: Create an OpenAI API key

Lecture 2: ISSUES WITH OPENAI

Lecture 3: Create the sendMessage endpoint

Lecture 4: Set up the OpenAI API call

Lecture 5: Stream the OpenAI response on the front end

Lecture 6: Create the Message component and display new messages in chat window

Lecture 7: Finish implementing the Message component styles and logic

Lecture 8: Protect the chat routes and pages so only logged in users can access

Lecture 9: Add the loading state to the form

Lecture 10: Refine the OpenAI prompt

Lecture 11: Fix the footer form position and make chat window scrollable

Chapter 5: Storing chats with MongoDB

Lecture 1: Overview of edge functions

Lecture 2: Set up MongoDB Atlas account

Lecture 3: Set up the createChat endpoint

Lecture 4: Test the createChat endpoint

Lecture 5: Create the getChats endpoint

Lecture 6: Render the list of chats in the sidebar

Lecture 7: Style the chat list in the sidebar

Lecture 8: Implement creating a chat in the sendMessage endpoint

Lecture 9: Create the addMessageToChat endpoint

Lecture 10: Navigate to newly created chat page

Lecture 11: Reload chat list on route change

Lecture 12: Load chat messages for a particular chat

Lecture 13: Render chat messages for a particular chat

Lecture 14: Modify the sendMessage endpoint to cater for existing chats

Lecture 15: Implement conversation history in OpenAI

Chapter 6: UI Updates

Lecture 1: Fix streaming on wrong chats

Lecture 2: Auto-scroll when there's an incoming message

Lecture 3: Add Google font for our app

Lecture 4: Add missing styles for homepage

Lecture 5: Add UI for new chat

Chapter 7: Validation

Lecture 1: Validate chat id for chat id page

Lecture 2: Add validation to sendMessage endpoint

Lecture 3: Add validation to createNewChat endpoint

Lecture 4: Add validation to addMessageToChat endpoint

Chapter 8: Deploy

Lecture 1: Deploy to vercel

Lecture 2: BONUS!