The Ultimate AI Next.js 13 Crash Course for Beginners – Build 4 Apps in 12 Hours! (2023)

🚨 JOIN the world’s BEST developer Course & Community Zero to Full Stack Hero: https://www.papareact.com/course

🔴 Looking for the Code? 🛠️
https://links.papareact.com/github

🖥️ Join me as I build 4 Apps using Next.js 13, ReactJS, Tailwind CSS & TypeScript & More:

1️⃣ CHATGPT MESSENGER
2️⃣ DALL·E 2 IMAGE GENERATOR
3️⃣ TRELLO CLONE
4️⃣ WEATHER APP

🕐 TABLE OF CONTENTS:
➡️ Introduction
0:00 Build Showcases & Tech Stack
1:57 Zero to Full Stack Hero

4:51 ChatGPT Messenger App Introduction

1️⃣ ChatGPT Messenger
5:44 Build Showcase & Tech
12:33 Setting up OpenAI API Key (1/3)
14:17 Setting up Firebase
16:02 Initialising the Build
27:44 Building the Home Page (1/2)
31:30 Implementing Heroicons
33:18 Building the Home Page (1/2)
37:41 Building the Side Bar Component (1/5)
40:38 Building the New Chat Component
44:11 Building the Side Bar Component (2/5)
47:12 Implementing NextAuth Authentication with Firebase
1:00:14 Building the Login Screen & Functionality
1:09:41 Building the Side Bar Component (3/5)
1:13:25 Setting up & Implementing Cloud Firestore
1:18:35 Implementing Create New Chat Functionality
1:27:50 Connecting to the Cloud Firestore Database
1:32:16 Building the Chat Row Component
1:43:43 Building the Side Bar Component (4/5)
1:45:19 Implementing Delete Chat Functionality
1:47:52 Building the Chat Section of the Home Page
1:51:31 Building the Chat Component (1/3)
1:51:48 Building the Chat Input Component (1/2)
1:59:53 Implementing the Messaging Functionality
2:05:03 Implementing React Hot Toast Library for Notifications
2:11:47 Setting up OpenAI API Key (2/3)
2:23:54 Setting up Firebase Admin
2:31:16 Setting up OpenAI API Key (3/3)
2:37:02 Building the Chat Component (2/3)
2:38:56 Building the Message Component
2:43:48 Building the Chat Component (3/3)
2:50:18 Creating the Model Selection Component
2:50:49 Explaining & Implementing useSWR
2:54:10 Implementing React Select Library
2:59:46 Building the Side Bar Component (5/5)
3:01:15 Building the Chat Input Component (1/2)
3:04:03 Testing Different ChatGPT Models
3:07:58 Deploying to Vercel & Final Build Demo
3:15:17 DALL·E 2 Image Generator Introduction

2️⃣ DALL·E 2 Image Generator
3:16:49 Build Showcase & Tech
3:20:30 Setting up Microsoft Azure Functions
3:23:49 Initialising the Build
3:34:40 Building the Header Component
3:45:35 Building the Prompt Input Component
3:53:46 Setting up OpenAI API Keys
3:58:35 Setting up an API Endpoint (1/2)
4:03:17 Implementing useSWR
4:09:31 Implementing Microsoft Azure Cloud Functions & Blob Storage
4:28:32 Implementing the Chat GPT Prompt Suggestion Functionality
4:45:08 Setting up the Rest of the API Endpoints (2/2)
4:45:25 Implementing DALL·E 2 Generate Image Functionality
5:12:06 Implementing the Use / New Suggestion Functionality
5:52:12 Implementing React Hot Toast Library
5:58:51 Deploying to Vercel & Final Build Demo
6:12:11 Trello Clone Introduction

3️⃣ Trello Clone
6:14:15 Build Showcase & Tech
6:34:05 Building the Header Component (1/2)
6:43:54 Implementing the React Avatar Library
6:48:56 Building the Chat GPT-4 Suggestion Box in the Header Component
6:52:21 Building the Header Component (2/2)
6:57:36 Implementing React Beautiful DnD Library
7:03:09 Implementing Appwrite Cloud
7:14:19 Implementing Zustand
7:28:12 Building the Board Component (1/2)
7:29:24 Implementing To-Do Data
7:42:55 Sorting Columns by Column Types
7:46:07 Building the Board Component (2/2)
7:52:26 Building the Column Component
8:05:25 Building the To-Do Card Component
8:10:15 Implementing the DnD & Search Functionality
8:37:47 Implementing ChatGPT 4 Functionality with OpenAI API
9:00:03 Implementing Headless UI Components
9:20:41 Implementing the Image Upload Functionality
9:48:24 Deploying to Vercel & Final Build Demo
9:54:13 Weather App Introduction

4️⃣ Weather App
9:56:24 Build Showcase & Tech
10:02:30 Initialising the Build
10:11:41 Setting Up Tremor
10:13:53 Building the Home Page
10:19:05 Building the City Picker Component
10:38:39 Implementing Dynamic Routing in Next.js 13
10:40:12 Creating the Weather Page
10:43:44 Implementing the Free Weather API with StepZen
10:56:26 Implementing Apollo Client
11:02:17 Fetching Weather Queries from GraphQL
11:13:56 Building Callout & Stat Cards
11:26:02 Building the Information Panel
11:47:01 Building the Temperature, Rain & Humidity Charts
12:06:42 Implementing the Loading Functionality
12:09:33 Implementing ChatGPT 4 using OpenAI API
12:32:02 Showcasing the Caching Functionality
12:35:31 Deploying to Vercel & Final Build Demo
12:41:36 Outro

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with ChatGPT, OpenAI, Trello or any of their subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.