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.
Пікірлер: 128
4K Stream is now Available PAPAFAM! 🎉
Soooooo excited!!!!! Looking forward to this. Thank you for constantly creating relevant builds that we will all benefit from.
Amazing tuts! Well done Sonny! Appreciate all your hard work 👏🏻👏🏻👏🏻
Loved your Next js 13 previous course please make more of that
This is going to be massive
love your work man
Sonny, thank you very much for your valuable tutorials!!👍
thank you sir, we love your work
Thank you so much!!
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
As always sonny.. Great video :)
This is so rich and huge. Thanks man
amazing!
That's why we all love and admire Sonny.
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 :)
Looking forward rockstar
Yoooo Sonnny much love from Nigeria🙌🙌😍😍
Hello PAPAFAM, I am excited.
Love u sonny 💗
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
Thanks so much ❤ Is the one you released 2months ago still watchable?
that’s why i love sonny❤
🤖 ... it was tedious, but we have made it and are victorious! thanks for the work you do bro! learned a TON!
@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.
Sonny Sangha is back and on 🔥
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
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.
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?
Reading trough the description , we have built a trello clone with Papareact 😊 is this a different one?
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
6 ай бұрын
Thanks for being an awesome member of the #PAPAFAM I’ll defo look into it!
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
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.
Sonny Sangha , what do you think is Jsx will overtake Tsx in react soon ?
So huge 😍
Can you please make a detailed video on implementation of google AdSense on nextjs project without losing SSR?
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.
una pregunta amigo, tu mismo editas los videos ?
PapaFam🥰
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.
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
6 ай бұрын
me too; i'm getting this error;Error: Cannot destructure property 'data' of '(intermediate value)' as it is undefined
1:44:40 chats not appearing after moving query to sidebar component
Does anyone knows the app Sonny use to stream they video?
Cannot deploy the Dall-E Azure function. I see 'No HTTP triggers found' in the logs. No errors etc. What's going wrong?
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
7 ай бұрын
Appreciate you! 💯💪🏽 #PAPAFAM
Is it helpful for beginners
Wow
i only know html and css, gonba build it but how🥺🥺
Such a lost sheep -me, already clicking to watch😭😭😭
❤
Hi Sonny, My login is not working with google
Is this full NextJs course?
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
7 ай бұрын
same problem!
@arnav080
7 ай бұрын
same problem!
@arnav080
7 ай бұрын
did you manage to fix it?
@diegoserrano8717
7 ай бұрын
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
6 ай бұрын
been having same issues
hello
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.
How come now rarely make tutorials for React Native/Expo 😢
👍
I dont know why but the video is not playing , I have been trying since 5 hours
Yall remember Sonny's brief stint with fitness content? I subbed for shirtless Sonny
@SonnySangha
7 ай бұрын
Hahahahaha shall I make a return on the vlogs and fitness content?
@kyle-andrewgovinder9902
7 ай бұрын
@@SonnySangha I may have come for the pecs but I stayed for the Next.js tutorials
Only 480p is available?
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
7 ай бұрын
Does companies use supabase for backend?
@samyeksonawane
7 ай бұрын
@@vijayreddy3422 bro it is good for startups.
Hey Sonny Why The Quality is 360P Please Fix It.
@SonnySangha
7 ай бұрын
4K is now Available!
Bro next js already have back-end then why are you using firebase please reply bro
@codingnerd609
7 ай бұрын
i think firebase for databse
@swapnilpatel3337
7 ай бұрын
Bro firebase for database i think you do not understand for Next js architecture or Full stack web development
@codingnerd609
7 ай бұрын
@@swapnilpatel3337 any explantion will be appreciated im a beginner
why the picture quality is low?
@SonnySangha
7 ай бұрын
4K is now Available!
@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
6 ай бұрын
were you able to fix it bcz i am facing same issue
@RobiulIslam-dn9mm
6 ай бұрын
@@rajahussnain8195 Yes, after some research, I was able to solve it.
@RobiulIslam-dn9mm
6 ай бұрын
@@rajahussnain8195 If you still need help, simply comment here.
@chinedunwafor3793
6 ай бұрын
@@RobiulIslam-dn9mm i need help please
@obahsylva7755
4 ай бұрын
how were you able to resolve it?
Hey why is the stream having low video quality?
@SonnySangha
7 ай бұрын
KZread is still processing the 4K Stream, it should be up soon!
@avi_5827
7 ай бұрын
@@SonnySanghanot yet done
@SonnySangha
7 ай бұрын
@@avi_5827it’s a 12 hour video, it will take time
@avi_5827
7 ай бұрын
@@SonnySangha waiting patiently for it, Thank you so much 🙏
@SonnySangha
7 ай бұрын
4K is now Available!
How to get your git hub repo 😮
@SonnySangha
7 ай бұрын
links.papareact.com/github
well, time for another one 14 is now live !!! LMAO , this is getting out of hand with this ai BOOM
💯💢💥💓
Can you stream in higher quality 😢
@SonnySangha
7 ай бұрын
KZread is still processing the 4K Stream, it should be up soon!
@SonnySangha
7 ай бұрын
4K is now Available!
Can you see quality please can't see code
@SonnySangha
7 ай бұрын
KZread is still processing the 4K Stream, it should be up soon!
@SonnySangha
7 ай бұрын
4K is now Available!
Why video 360p
@SonnySangha
7 ай бұрын
4K is now Available!
The stream has no audio and low video resolution don't know why
@SonnySangha
7 ай бұрын
Not anymore... It's now in Glorious 4K Quality!
Quality 360 only?
@Joseph-Codes
7 ай бұрын
I thought my connection was bugging😂
@TokenTreasure
7 ай бұрын
@@Joseph-Codes 😂😂
@SonnySangha
7 ай бұрын
It’s processing the 4k
@TokenTreasure
7 ай бұрын
Quality is still 360 🥲
@SonnySangha
7 ай бұрын
4K is now Available!
Is it just me, or is the resolution way too low? (360p)
@SonnySangha
7 ай бұрын
KZread is still processing the 4K Stream, it should be up soon!
@SonnySangha
7 ай бұрын
4K is now Available!
@cazam87
7 ай бұрын
@@SonnySangha Thank you! 😀
Video quality is not good it is 720p in the name of 4k.
The video quality is not good! I cannot follow the tutorial. I don't know how people can follow. thanks
@SonnySangha
7 ай бұрын
As mentioned in the pinned comment the 4k is processing, it’ll be up soon!
@SonnySangha
7 ай бұрын
4K is now Available!
your work is always incredible even if the quality of this video is low
@SonnySangha
7 ай бұрын
No more... It's now in Glorious 4K Quality!