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