🔴 Let’s Build an AI Weather App with ChatGPT-4 (Next.js 13.3, React, Tremor 2.0, StepZen, GraphQL)
HTML-код
- Опубликовано: 7 июн 2024
- 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
❗️StepZen has hooked us up with a Customized FREE plan… Check it out! 👉 stepzen.com/signup?...
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as I show you how to build an AI Weather app with Next.js 13. You'll learn the following in this build:
👉 How to use the Free Weather API to generate real-time weather data for any city in the world!
👉 How to use the ChatGPT API to create a summary of your weather data!
👉 Create API endpoints in your Next.js 13.3 app to securely manage requests
👉 How to use StepZen to easily create a GraphQL interface with the weather API!
👉 How to utilise Apollo to connect with our GraphQL backend
👉 How to build a fully responsive site with Tailwind CSS
👉 Adding Tremor 2.0 to level up your app's UI!
👉 Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!)
👉 How to use the new App folder structure in Next.js 13!
👉 Dynamic page routing in Next.js 13
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!
+ So Much More!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up to the PAPA Newsletter here 👉 links.papareact.com/newsletter
👇🏻 FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
01:03 Build Showcase
03:56 Build Tech (1/2)
04:17 StepZen Sponsorship
05:42 Build Tech (2/2)
07:15 Zero to Full Stack Hero
08:11 University of Code
09:47 Build Tech Stack
11:05 Initialising the Build
18:59 Build Layout
21:56 Setting Up Tremor
24:40 Building the Home Page
30:32 Building the City Picker Component (1/2)
41:35 Implementing Heroicons
42:45 Live Debugging
45:04 Building the City Picker Component (2 /2)
52:04 Implementing Dynamic Routing in Next.js 13
54:04 Creating the Weather Page
58:11 Explaining the Free Weather API
59:24 Implementing StepZen
1:02:14 Implementing the Free Weather API with StepZen
1:08:51 Setting up Type Definitions
1:11:30 Implementing Apollo Client
1:18:01 Fetching Weather Queries from GraphQL
1:30:32 Building Callout Cards in the Weather Page
1:33:29 Building Stat Cards in the Weather Page
1:44:39 Building the Information Panel in the Weather Page
2:07:06 Building the Temperature Chart in the Weather Page
2:13:19 Live Debugging
2:19:54 Building the Rain Chart in the Weather Page
2:23:38 Building the Humidity Chart in the Weather Page
2:27:27 Implementing the Loading Functionality
2:30:14 Implementing GPT-4 using OpenAI API
2:53:21 Showcasing the Caching Functionality
2:55:14 Trying GPT 3.5 Turbo for the Build
2:57:15 Deploying to Vercel
3:02:50 Final Deployed Build Demo
3:10:03 Build Summary
3:12:01 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with ChatGPT, OpenAI or/and any of its 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.
#chatgpt #nextjs #gpt4 #javascript #openai #javascript #tailwindcss #tutorial #android #reactjs #ai
Get STARTED with Vercel Today 👉 links.papareact.com/vercel
this is sick! im halfway through the tutorial. Most modern weather app ever. thank you!
I really love your energy 🔋 to help others
Your my inspiration,man really I'm greatfull for your teaching
You are the best, watching you frim Syria
Thank you Sonny, wonderful tutorial, you are awesome and a great inspiration
Great tutorial once again!
What you do is more than greattttt
Thanks alot
Sonny, thank you! It`s was pleasure to develop this app)))
God Bless these people...
Awesome tutorial Sonny, great material! If anyone is building the CityPicker component with states (not just countries/cities) & was struggling to get the US to render properly; note that the stateCode is the `isoCode` and the countryCode is the `countryCode`. I got it working, hope this helps anyone who's stuck :)
Nice! Thanks.
very helpful content, love from nepal
I love your work i am a cameroon
Great and especially hilarious weather app. Now, how can I make the GPT-text being spoken? How cool would it be, if the computer would read the weather summary? Any of you can recommend a preferable free/low cost API/library for text-to-speech?
Hey Sonny, I know I shouldn’t have asked this question here but that’s the only way I think I can get hold to you.
Do you do freelancing, I need assistance with my React N App, kindly advise if we can have a chat. Thanks, love your energy though 😂
for begginners if stepzen is not running try changing execution policy and now stepzen made hosting dashborad on website default instead of locally so add extra command like stepzen start --dashboard locally
Thanks Avinash! For others I had to type this into my command line that was running stepzen: stepzen start --dashboard local
Please note that it was local and not locally. The problem stemmed from back at the 106:50 marker when stepzen didn't give me the localhost url but actually gave me my dashboard link to my stepzen account. Also make sure that you change you uri: in your apollo-client.ts file to be the localhost url given after running stepzen start --dashboard local that Sonny does at the 1:14:37 marker. After you do this then your 405 error that you are getting at the 1:25:46 marker. Lastly, in you fetchWeatherQueries.ts file just make the $daily: String and $hourly: String with no default strings after it. They are optional and will only give your code lots of nulls.
@@miketorres3040 thanks Apollo prod. it was local you are right but when deploying the app we have to change the uri according to the example prompt in terminal instead of local url in env variables at the 3:01:25 marker then this process throws an error do you have any suggestion related to it P.S- on local uri it works fine on local env not on deployed version.
@@miketorres3040 thanks man, it really helped
@@avi91971 Did you solve the error at the deploying now?
@@natanontrangratanajit8693 nah bro i think it is related to something backend hosting but couldnt figure it out if you have something it would be of much help
for some reason in my case, tremor css classes overwrite tailwind ones
Hey man. My colour is not changing at all. I have no errors showing up but for the warning and other cards, the colour is showing black and white. I can't add yellow or green etc. Can someone help please? Thank you
hey i need hlep stepzen curl import is giving me error
A problem occurred while processing your import. Please check that the given curl command is valid.
Effect failure: {"error":true,"reason":"Cannot initialize SurfaceAndPressureVariable from invalid String value temperature_2m relativehumidity_2m apparent_temperature precipitation_probability precipitation uv_index for key "}
if some one know how to resolve please reply
nice. Keep up the good work sir.
i am facing an error in deployment and if anyone has the soln it will help
"9-151e301adf12d0cb.js:1 Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
w"
build is working on local env not on depolyment on vercel pro plan
I've got the same issue
Guys can you please give me the git link who have created
The project successfully
it doesn't work with "Mexico" (on the country option)
stepzen curl not working :(
I have an issue, but first... Sonny you're the best !!!
Does anyone have this error when the fetching all of data: "ApolloError: Variable "$longitude" of required type "String!" was not provided." I'm stuck here and need help please :(
Cheers !
Me to brother did you fix the issue if please send me the code
@@SajidP-pv1rd Sorry bro, still struggling like you :(
@@egemenozyurek8160 I have fixed the issue just assign longitude and latitude with land and long in page.tsx and value and key pair
do you mind to share the code with me please :))
@@egemenozyurek8160 ya sure bro send me your email
Sir Can you do a SaaS for all the functionalities for GPT4 with payment to stripe that will be a great content.
where is the link of the whole code in github?
my app is not fetching weather data, its inaccurate and says its updated in 1969, any tips? my code is 100% correct, i checked with Sonnys repo
Sonny,
Im around 45 minutes into the video on the CityPicker. When i pick any other country besides US & UK the city drop down works, But on United States the city drop-down does not work and the App hangs up giving me a page unresponsive error.
Is this only happening to me or is anyone else experiencing this?
This is most likely an issue with a high number of cities being loaded into the select field - I would need to look into this to find a fix but it’s an issue with the libraries!
@@SonnySangha Thanks for the reply sonny. I was thinking maybe because we only have a Country and City drop-down and not a state drop down. Also noticed we are only using the country and city imports and not the state. Maybe that has something to do with it.
I’m in the discord if we could review this would really be helpful in completion of this project!
Really looking forward to completing the build. Thanks again for your time. It’s much appreciated. 🙏🏾
It also happened to me. It is because the US contains a lot of cities so the select list is overloaded
does not fetch weather. getting null on data.
I need curl url for stepzen
What motivates you to do these stuffs .Even I wanted to start these kind of work like implementing these kind of website from the Scratch.
Please give some tips so that I could be helpful for me as well as others who wanted to do the same.
You could start by helping Sonny first. I heard he likes double chocolate ice cream and expensive bling. How about you send him a gold-plated ice cream cone and a note with your questions? He'll be delighted to hear from you. Trust me, imma expert. ( :
@@amadeusocean1201 thank you mate .You are so kind
A problem occurred while processing your import. Please check that the given curl command is valid.
Effect failure: {"error":true,"reason":"Value of type 'Float' required for key 'longitude'."}
adds quotation marks to the link as if it were a string.
I had this problem today on stepzen dashboard. Got pass this error but have an error status code 405 on apollo.
How I was able to resolve was: Instead of putting param values into the variable tabs on the lower left, enter the values in Buider section, like latitude: "xxx"
One day the varaible tab disappeared. Today, it's function is with the builder. I think some upgrades are "stepping" on prior setups.
Anyone faced problem with their AreaChart not displaying in TempChart component
zsh : parse error near ‘&’
The types of 'value.latitude' are incompatible between these types.
Type 'string | null | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2322)
in options {cities } option .it working fine in local host but .in deployement above things is showing
try logging the object, for me it was coming in as values.latitude, had to change the Type and bring it in as values instead of value
try this it works for me ... !
type cityOption = {
value: {
latitude: string | null | undefined;
longitude: string | null | undefined;
countryCode: string;
name: string;
stateCode: string;
};
label: string;
} | null;
wow
TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined.
Source
app\location\[city]\[lat]\[long]\page.tsx (21:9) @ data
19 |
20 | const client = getClient()
> 21 | const {data} = await client.query({
| ^ Iam getting this error can any one debug whats going wrong here
i am also getting same error
Same mate.
Can you tell if you find the solution?
did anyone debug it till now?
Can you provide fetchWeatherQueries code please. I am getting a error of
Response not successful: Received status code 405😊😊
Iam also getting the same error did you get any solution if please give me git link
@@SajidP-pv1rd no
Did u solve this error?
@@zishanahmad6830 Not yet
I will post it
where is the whole code?
Can you list out all VS code extensions you use? Please... sir...
can anyone help me out in stepzen import curl (1:05:00) , it showing error while executing The ampersand (&) character is not allowed. The & operator is reserved for future use; wrap an ampersand in double quotation marks ("&")
to pass it as part of a string. and when i wrap then our url get error it not able to fetch data .....
i have resolve the problem just you need to put it inside a double quote paste the url in terminal
put backslashes infront of them... like this \&foo=\'bar'
@@AdityaRaj-ix3mn Omg Dude - You are my savior
@@engageintellect thats don`t help, error on coma ","
@@andreyokhrimenko2271 try with this command: stepzen import curl "URL_HERE"
1:20:43
I'm not sure what I am doing wrong, everything was working perfectly for me, right up until the gpt part. I keep getting the following error after implementing the 'getWeatherSummary' api: "Error: Unexpected end of JSON input" Source: app/location/[city]/[lat]/[long]/page.tsx (47:18) @ async WeatherPage
Any help would be greatly appreciated. 🙏
you are missing the api folder app/api/location/[city]/[lat]/[long]/page.tsx
Hey Mate - same error! Did you fix it? If it is, help me please!
@@andreyokhrimenko2271 the answer above helped me. I was missing the api folder.
@@andreyokhrimenko2271 Even I'm getting the same error. Did you fix it?
@@Rohit-lz4oe No didnt, but I know reason - api gpt become paid, from 01jul2023, I try to do just simple test from gpt api site and its fail too. Cause no money no honey :)
2:27:33
Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; lable: string; }[] | undefined' is not assignable to type 'OptionsOrGroups
I'm facing the same issue, could be some type error that I can't fix yet. If some one can fix this issue, please help me... Here's the error details:
Type error: Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }[] | undefined' is not assignable to type 'OptionsOrGroups | undefined'.
Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }[]' is not assignable to type 'readonly ({ value: { latitude: string; longitude: string; countryCode: string; name: string; stateCode: string; }; label: string; } | GroupBase)[]'.
Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }' is not assignable to type '{ value: { latitude: string; longitude: string; countryCode: string; name: string; stateCode: string; }; label: string; } | GroupBase'.
Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }' is not assignable to type '{ value: { latitude: string; longitude: string; countryCode: string; name: string; stateCode: string; }; label: string; }'.
The types of 'value.latitude' are incompatible between these types.
Type 'string | null | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
The answer is
latitude:state.latitude!,
longitude:state.longitude!,
@@alantisgreen7011 You are the champ! Thank you much for your suggestion, my error is gone!
can anyone give me source code??
1:25:00 in 4h
Unhandled Runtime Error
Error: Connector: HTTP Error: Bad Request
probably an error in your fetchweatherqueries make sure everything is typed out correctly, i had the same error and just had to add a _2m to a query
@@fifabeast7 bro have done the complete build?
Has anyone solved this issue yet? I need your help.😥
has anyone solved this issue? I'm having the same message and can't figure out what's wrong...
solved it! hahaha it was a typo. in the fetchWeatherQueries I put a space between a , that should not exist.
I'm facing an issue during deployment, Can anyone help me out please. Here's the error details:
Type error: Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }[] | undefined' is not assignable to type 'OptionsOrGroups | undefined'.
Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }[]' is not assignable to type 'readonly ({ value: { latitude: string; longitude: string; countryCode: string; name: string; stateCode: string; }; label: string; } | GroupBase)[]'.
Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }' is not assignable to type '{ value: { latitude: string; longitude: string; countryCode: string; name: string; stateCode: string; }; label: string; } | GroupBase'.
Type '{ value: { latitude: string | null | undefined; longitude: string | null | undefined; countryCode: string; name: string; stateCode: string; }; label: string; }' is not assignable to type '{ value: { latitude: string; longitude: string; countryCode: string; name: string; stateCode: string; }; label: string; }'.
The types of 'value.latitude' are incompatible between these types.
Type 'string | null | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
did you ever solve this?
IN MY CASE i had a same type error that because of forgetting "?"; latitude?: string; longitude?: string;
Can I make this for free?
Anyone please give me source code
Please help me out. I am Getting Red underline in options in CityPicker page.
*options* ={City.getCitiesOfCountry(selectedCountry.value.isoCode)?.map((state) => ({
value: {
latitude: state.latitude,
longitude: state.longitude,
countryCode: state.countryCode,
name: state.name,
stateCode: state.stateCode,
},
label: state.name,
}))
}
@IgniteTechie
3 days ago (edited)
Please help me out. I am Getting Red underline in options in CityPicker page.
options ={City.getCitiesOfCountry(selectedCountry.value.isoCode)?.map((state) => ({
value: {
latitude: state.latitude!,
longitude: state.longitude!,
countryCode: state.countryCode,
name: state.name,
stateCode: state.stateCode,
},
label: state.name,
}))
}
to make latitude: state.latitude!
and same as longitude: state.langitude!
@@sonukumarmahto3915 what are you trying to say here dude?
@@IgniteTechie your have put ! in two field
latitude: state.latitude!,
longitude: state.longitude!,
@@sonukumarmahto3915 Thanks Bro.
@@IgniteTechie most welcome bro
Anyone have done the complete build? Can you kindly share your GitHub repo?
Sure, PayPal 50 Euros my way.
sorry but open-moteo is suck. All response are null except temperature :(
Please give the timestamp.
Added!
@@SonnySanghaHello, I am going to work on my own idea. That will be a dynamic website. So, i just want to know what should I use firebase or MongoDB?
ParserError:
Line |
1 | … st\?latitude=52.52\&longitude\=13.41\&hourly\=temperature_2m,relative …
| ~
| Missing argument in parameter list.
can anyone help me to debug i don't known why this is occuring
Always some kind of problem with your code, one thing or another, and then once again almost finished the project and at the time of sending a request to the API GPT learn that the requests are paid, free to use until 01.07.2023!
I am from Ukraine and I can not and due to the current situation in the country can not afford to throw in 5 dollars for a project that will not bring income. Write in the comments to the videos that you use paid API!
Every country is working besides United States 🤦🏾♂
I also saw this and I thnk the US has too many cities for it to run correctly.
Just a heads up, I got the US to work but I added a new dropdown option between country and city. They include a state option. So that works for me. Added a state and it works great!
@@ericsalvi2711 can I see how you did that ? Can I have a link to your repo ?
po
I'm stuck in fetching the data @1:25:00
This is the error I am getting::
error - node_modules\@apollo\client\errors\errors.cjs @ call
error - ApolloError: fetch failed
at new Promise ()
at Array.forEach ()
digest: "1481629425"
null
Any solution for this error?
same here did you solved it?
Can anyone help with this error ?
did you solved it?
same problem
@@mdanassabah6448
I am getting - error SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at AsyncResource.runInAsyncScope (node:async_hooks:203:9) any ideas?
Bro did you fix it? Same error when trying to get data from chatGPT...
I have the same problem. Did you fix it?
@@vmeset Problem was that API become paid, from 01 jul 2023, I made some simple tests with API from example for free and get same error
@@andreyokhrimenko2271 I fixed it making new account
Hello Guys, Can someone help me out i am getting this error after implementing OPN API ummary part:
Unhandled Runtime Error
Error: Unexpected end of JSON input
Call Stack
JSON.parse
parseJSONFromBytes
node:internal/deps/undici/undici (6571:19)
successSteps
node:internal/deps/undici/undici (6545:27)
node:internal/deps/undici/undici (1211:60)
node:internal/process/task_queues (140:7)
AsyncResource.runInAsyncScope
node:async_hooks (203:9)
AsyncResource.runMicrotask
node:internal/process/task_queues (137:8)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)
I had the same error
It simply means you didn't get a response from Openai API
Your free credit must have expired
Try adding your card and it will work fine
@@deriboss I have added in my own card and I am also dealing with the same issue as him. Shows a request failed with status code 429
@@edwins2056 Same. Too many requests. I created an account and they give you $18 for free. Mine expired on 5/1 but I just created it now.
same error. Did anyone fix it?