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: www.papareact.com/course
🔴 Looking for the Code? 🛠️
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:33:27 Trying ChatGPT 3.5 Turbo
12:35:31 Deploying to Vercel & Final Build Demo
12:41:36 Outro
12:43:23 Next.js 13 Crash Course
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.

[@SonnySangha]

4K Stream is now Available PAPAFAM! 🎉

[@judevector]

This is going to be massive

[@ulvinasibli]

love your work man

[@arshdeepsingh221]

Loved your Next js 13 previous course please make more of that

[@rayusaki88]

Amazing tuts! Well done Sonny! Appreciate all your hard work 👏🏻👏🏻👏🏻

[@ahmadabdulkadir245]

thank you sir, we love your work

[@jemiemistry]

Soooooo excited!!!!! Looking forward to this. Thank you for constantly creating relevant builds that we will all benefit from.

[@selemunhagos2725]

Sonny, thank you very much for your valuable tutorials!!👍

[@raulparra4678]

Thank you so much!!

[@confidenceclinton8366]

This is so rich and huge. Thanks man

[@dainsleif3122]

amazing!

[@exploit.6848]

As always sonny.. Great video :)

[@bdd740]

That's why we all love and admire Sonny.

[@marcusbackendorf5360]

Hey Sonny. I just want to thank you. I landed an internship last month, and your tutorials about Next.js helped a lot. Looking forward to keep learning from you!!! Thank you again

[@coffeewithjava5625]

Looking forward rockstar

[@rockbelleh6237]

Yoooo Sonnny much love from Nigeria🙌🙌😍😍

[@siddharthsingh4862]

Love u sonny 💗

[@lawsonmichael2595]

Thanks so much ❤ Is the one you released 2months ago still watchable?

[@krisztiankaposi8054]

Reading trough the description , we have built a trello clone with Papareact 😊 is this a different one?

[@babarmughal8891]

Hello PAPAFAM, I am excited.

[@shareefhiasat9746]

Thanks! I implemented all the chatgpt tutorial faced challenges like firebase version 9 as its not latest and next js 13 issues as latest now is 14! i hope the resolution will be better as its dark mode and hard to see thanks again :)

[@usmanmarkaz]

Yes sir please start Full Stack React native Projects with AI and Many more am waiting there is already a lot of content for NEXT JS but less for React native so start this

[@tonyhiga8877]

that’s why i love sonny❤

[@matthewchukwu1306]

Sonny Sangha is back and on 🔥

[@J.JJorge]

Hey Sonny, in the Trello 2.0 Project i get an error whenever i drag the columns(ToDo, inprogress, Done) to another space, do you have the solution for that?

[@neetmangat3670]

🤖 ... it was tedious, but we have made it and are victorious! thanks for the work you do bro! learned a TON!

[@obahsylva7755]

@Sunny thank you so much for helping newbees like me. I've complete the first and second project. However after deploying the AI Image Generator, the deployed app is send and fetching data on the backend but not updating in the frontend. it is working perfectly on my local machine. I think I'm missing something.

[@pro_coder07]

Can you please make a detailed video on implementation of google AdSense on nextjs project without losing SSR?

[@AmericanDragon134]

Sonny Sangha , what do you think is Jsx will overtake Tsx in react soon ?

[@hubesh716]

Hey sir plz start Full Stack React native Projects with Both Expo and CLI approach and plz start this as soon as possible please sir

[@TshepoTau-ru2bv]

Sonny, Please Do An Ecommerce Project With Next.js 13, Redux Toolkit, React, Tailwind, TypeScript. Dont Add Anything Fancy Or Extra To The Design. Do Both Storefront And Admin Panel Where You Demonstrate Crud.

[@techtitbits]

Hi @SonnySangha,can you please make a short video on integrating PassportJS (Facebook, Google) into NextJS app. I will want to learn best practices in developing an application I am currently working on

[@brayanpoficial]

una pregunta amigo, tu mismo editas los videos ?

[@siddharthsingh4862]

So huge 😍

[@emmanueldesirekouadio3568]

PapaFam🥰

[@NachoGramajoFeijoo]

Anybody having problems on deployment? I deploy it and it brings the images in the first loading, but when I add one it doesn't refresh the images, neither automatically or pressing the button. But the image uploads to Azure.

Hi Sonny, just love all your videos. ♥ With the open source launch of META's AI model, llama 2. Could you teach us how to create an application based on this open source AI model?

[@SonnySangha]

Thanks for being an awesome member of the #PAPAFAM I’ll defo look into it!

[@playboy71322]

Following along and I’m using next.js 14. How hard is it to convert? I’m running into errors during the next auth portion saying my module path is not valid and I think it’s due to app routing.

[@aissame112]

Wow

[@jayakrishnanp5988]

All this for free is amazing opportunity to get an idea on all this concepts This man is a Goldman who give away the greatest wealth of education entirely for free

[@SonnySangha]

Appreciate you! 💯💪🏽 #PAPAFAM

[@maneeshsingh3038]

1:44:40 chats not appearing after moving query to sidebar component

[@awais_ansarii]

❤

[@gamestrategy2144]

Is it helpful for beginners

[@nomxxn]

I really want to create the weather app but man a lot has changed since you made that i get stuck at the fetchweatherquery part and it’s frustrating as hell, but nonetheless thanks for these videos brother

[@JacobMulli]

me too; i'm getting this error;Error: Cannot destructure property 'data' of '(intermediate value)' as it is undefined

[@atharvtyagi9161]

Anybody know a fix of fetching suggestions ? I can see it on my port 7071 endpoint but it says 500 Internal Server Error when i try to fetch it.

[@amansaxena4827]

👍

[@yanesnicolas5034]

Does anyone knows the app Sonny use to stream they video?

[@benjaminkoubik2703]

Cannot deploy the Dall-E Azure function. I see 'No HTTP triggers found' in the logs. No errors etc. What's going wrong?

[@xxyz224]

i only know html and css, gonba build it but how🥺🥺

[@disablegos6912]

why am I getting errors on SessionProvider code? I also use "use client"

[@justbcb]

I had this issue, and I realized that the SessionProvider I imported wasn't the custom created one.

[@thekontuli2828]

Such a lost sheep -me, already clicking to watch😭😭😭

[@bayunugroho788]

How come now rarely make tutorials for React Native/Expo 😢

[@diegoserrano8717]

Hey @sonny, why are you using an old version of openai, also do you have a premium plan to use it? I just hit the limit rates and cannot longer hit the openai.

[@rayenselmen603]

same problem!

[@arnav080]

same problem!

[@arnav080]

did you manage to fix it?

[@diegoserrano8717]

Had to buy some credits, and stick with the same version of the video as I wanted to use the same model, if you want to use newest model you need newest version, seems so

[@chinedunwafor3793]

been having same issues

[@kyle-andrewgovinder9902]

Yall remember Sonny's brief stint with fitness content? I subbed for shirtless Sonny

[@SonnySangha]

Hahahahaha shall I make a return on the vlogs and fitness content?

[@kyle-andrewgovinder9902]

@@SonnySangha I may have come for the pecs but I stayed for the Next.js tutorials

[@samyeksonawane]

Looking at the thumbnail i though he's gonna do a session on supabase. Note: those who dont know, supabase has this green theme for their thumbnails 😊

[@vijayreddy3422]

Does companies use supabase for backend?

[@samyeksonawane]

@@vijayreddy3422 bro it is good for startups.

[@SayantanOfficial-jq4mo]

Is this full NextJs course?

[@sdfsfsfd437]

💯💢💥💓

[@Akshay-if5im]

I dont know why but the video is not playing , I have been trying since 5 hours

[@RobiulIslam-dn9mm]

@SonnySangha please help:: 1. "Module '"openai"' has no exported member 'Configuration'. Did you mean to use 'import Configuration from "openai"' instead?" 2. ""openai"' has no exported member named 'OpenAIApi'. Did you mean 'OpenAI'?"

[@rajahussnain8195]

were you able to fix it bcz i am facing same issue

[@RobiulIslam-dn9mm]

@@rajahussnain8195 Yes, after some research, I was able to solve it.

[@RobiulIslam-dn9mm]

@@rajahussnain8195 If you still need help, simply comment here.

[@chinedunwafor3793]

@@RobiulIslam-dn9mm i need help please

[@obahsylva7755]

how were you able to resolve it?

[@bitujinger]

Hi Sonny, My login is not working with google

[@sumantade3671]

Hey Sonny Why The Quality is 360P Please Fix It.

[@SonnySangha]

4K is now Available!

[@ronakparmar8116]

hello

[@arshu0.720]

Bro next js already have back-end then why are you using firebase please reply bro

[@codingnerd609]

i think firebase for databse

[@swapnilpatel3337]

Bro firebase for database i think you do not understand for Next js architecture or Full stack web development

[@codingnerd609]

@@swapnilpatel3337 any explantion will be appreciated im a beginner

[@RajatSingh-zz8jr]

Only 480p is available?

[@nemogpt]

Hey why is the stream having low video quality?

[@SonnySangha]

KZbin is still processing the 4K Stream, it should be up soon!

[@avi_5827]

​@@SonnySanghanot yet done

[@SonnySangha]

@@avi_5827it’s a 12 hour video, it will take time

[@avi_5827]

@@SonnySangha waiting patiently for it, Thank you so much 🙏

[@SonnySangha]

4K is now Available!

[@syxshooters3121]

why the picture quality is low?

[@SonnySangha]

4K is now Available!

[@user-ei3sm9mr2p]

How to get your git hub repo 😮

[@SonnySangha]

links.papareact.com/github

[@Techi-TrailBlazer]

Can you stream in higher quality 😢

[@SonnySangha]

KZbin is still processing the 4K Stream, it should be up soon!

[@SonnySangha]

4K is now Available!

[@youdummy5928]

The stream has no audio and low video resolution don't know why

[@SonnySangha]

Not anymore... It's now in Glorious 4K Quality!

[@Noname_57]

well, time for another one 14 is now live !!! LMAO , this is getting out of hand with this ai BOOM

[@sumitkumarpatil3414]

Can you see quality please can't see code

[@SonnySangha]

KZbin is still processing the 4K Stream, it should be up soon!

[@SonnySangha]

4K is now Available!

[@MsHaTrang]

Why video 360p

[@SonnySangha]

4K is now Available!

[@emmanueldesirekouadio3568]

your work is always incredible even if the quality of this video is low

[@SonnySangha]

No more... It's now in Glorious 4K Quality!

[@cazam87]

Is it just me, or is the resolution way too low? (360p)

[@SonnySangha]

KZbin is still processing the 4K Stream, it should be up soon!

[@SonnySangha]

4K is now Available!

[@cazam87]

@@SonnySangha Thank you! 😀

[@TokenTreasure]

Quality 360 only?

[@Joseph-Codes]

I thought my connection was bugging😂

[@TokenTreasure]

@@Joseph-Codes 😂😂

[@SonnySangha]

It’s processing the 4k

[@TokenTreasure]

Quality is still 360 🥲

[@SonnySangha]

4K is now Available!

[@beastboy..]

Video quality is not good it is 720p in the name of 4k.

[@patite3103]

The video quality is not good! I cannot follow the tutorial. I don't know how people can follow. thanks

[@SonnySangha]

As mentioned in the pinned comment the 4k is processing, it’ll be up soon!

[@SonnySangha]

4K is now Available!