🔴 Let’s Build an AI Weather App with ChatGPT-4 (Next.js 13.3, React, Tremor 2.0, StepZen, GraphQL)

🚨 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

[@SonnySangha]

Get STARTED with Vercel Today 👉 links.papareact.com/vercel

[@ai_coding]

this is sick! im halfway through the tutorial. Most modern weather app ever. thank you!

[@olayinkakoleaje]

I really love your energy 🔋 to help others

[@FatemehDamarchilou]

What you do is more than greattttt Thanks alot

[@SuperPompey77]

Great tutorial once again!

[@akhil5130]

Your my inspiration,man really I'm greatfull for your teaching

[@kittikattification]

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 :)

[@ammarhaidar5995]

You are the best, watching you frim Syria

[@user-zq1wn7th8m]

Sonny, thank you! It`s was pleasure to develop this app)))

[@got-to-go]

God Bless these people...

[@taunado]

Nice! Thanks.

[@office394]

very helpful content, love from nepal

[@rcccs1]

Thank you Sonny, wonderful tutorial, you are awesome and a great inspiration

[@leboncoindelinfos8937]

I love your work i am a cameroon

[@armandocumbane8221]

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 😂

[@amadeusocean1201]

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?

[@lefosg]

for some reason in my case, tremor css classes overwrite tailwind ones

[@avi91971]

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

[@miketorres3040]

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.

[@avi91971]

@@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.

[@pulkitkamboj1785]

@@miketorres3040 thanks man, it really helped

[@natanontrangratanajit8693]

@@avi91971 Did you solve the error at the deploying now?

[@avi91971]

@@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

[@tanishqava8667]

nice. Keep up the good work sir.

[@codebreakerchronicles]

Sir Can you do a SaaS for all the functionalities for GPT4 with payment to stripe that will be a great content.

[@SajidP-pv1rd]

Guys can you please give me the git link who have created The project successfully

[@akshaykumargupta6530]

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

[@abi_one_8]

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.

[@amadeusocean1201]

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. ( :

[@abi_one_8]

@@amadeusocean1201 thank you mate .You are so kind

[@user-ui9un3pv6c]

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

[@egemenozyurek8160]

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 !

[@SajidP-pv1rd]

Me to brother did you fix the issue if please send me the code

[@egemenozyurek8160]

@@SajidP-pv1rd Sorry bro, still struggling like you :(

[@SajidP-pv1rd]

@@egemenozyurek8160 I have fixed the issue just assign longitude and latitude with land and long in page.tsx and value and key pair

[@egemenozyurek8160]

do you mind to share the code with me please :))

[@SajidP-pv1rd]

@@egemenozyurek8160 ya sure bro send me your email

[@avi91971]

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

[@amadeusocean1201]

I've got the same issue

[@alihsn6372]

I need curl url for stepzen

[@harmonyofficial1937]

where is the link of the whole code in github?

[@gabrielaalvaradobarrancos7251]

it doesn't work with "Mexico" (on the country option)

[@MikeeBuildstech]

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?

[@SonnySangha]

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!

[@MikeeBuildstech]

@@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. 🙏🏾

[@rcccs1]

It also happened to me. It is because the US contains a lot of cities so the select list is overloaded

[@kaustubhkajave413]

stepzen curl not working :(

[@DianaDetroit]

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

[@rj_aman1]

zsh : parse error near ‘&’

[@KevinPaulGonzales]

does not fetch weather. getting null on data.

[@johndelgado2005]

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.

[@VonnieKinsey]

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.

[@hades5509]

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

[@cecilemarleen7296]

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

[@mahmoudkhalil9624]

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;

[@engageintellect]

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. 🙏

[@ahmeddev85]

you are missing the api folder app/api/location/[city]/[lat]/[long]/page.tsx

[@andreyokhrimenko2271]

Hey Mate - same error! Did you fix it? If it is, help me please!

[@engageintellect]

@@andreyokhrimenko2271 the answer above helped me. I was missing the api folder.

[@Rohit-lz4oe]

@@andreyokhrimenko2271 Even I'm getting the same error. Did you fix it?

[@andreyokhrimenko2271]

@@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 :)

[@harmonyofficial1937]

where is the whole code?

[@SajidKhan-wx5hh]

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

[@deepakjain4191]

i am also getting same error

[@hashir2749]

Same mate.

[@hashir2749]

Can you tell if you find the solution?

[@ishanporwal4403]

did anyone debug it till now?

[@tannedstone3736]

2:27:33

[@paschalkings8184]

wow

[@AdityaRaj-ix3mn]

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 .....

[@AdityaRaj-ix3mn]

i have resolve the problem just you need to put it inside a double quote paste the url in terminal

[@engageintellect]

put backslashes infront of them... like this \&foo=\'bar'

[@andreyokhrimenko2271]

@@AdityaRaj-ix3mn Omg Dude - You are my savior

[@andreyokhrimenko2271]

@@engageintellect thats don`t help, error on coma ","

[@adhitiacahyanugraha3767]

@@andreyokhrimenko2271 try with this command: stepzen import curl "URL_HERE"

[@Degent-Dev]

Can you provide fetchWeatherQueries code please. I am getting a error of Response not successful: Received status code 405😊😊

[@SajidP-pv1rd]

Iam also getting the same error did you get any solution if please give me git link

[@Degent-Dev]

@@SajidP-pv1rd no

[@zishanahmad6830]

Did u solve this error?

[@Degent-Dev]

@@zishanahmad6830 Not yet

[@SajidP-pv1rd]

I will post it

[@tannedstone3736]

1:20:43

[@linushahs1117]

Can you list out all VS code extensions you use? Please... sir...

[@techgamertej2811]

can anyone give me source code??

[@professorTuan2210]

1:25:00 in 4h Unhandled Runtime Error Error: Connector: HTTP Error: Bad Request

[@fifabeast7]

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

[@MasumHasanbd]

@@fifabeast7 bro have done the complete build?

[@professorTuan2210]

Has anyone solved this issue yet? I need your help.😥

[@yanncostaa]

has anyone solved this issue? I'm having the same message and can't figure out what's wrong...

[@yanncostaa]

solved it! hahaha it was a typo. in the fetchWeatherQueries I put a space between a , that should not exist.

[@IgniteTechie]

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, })) }

[@sonukumarmahto3915]

@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!

[@IgniteTechie]

@@sonukumarmahto3915 what are you trying to say here dude?

[@sonukumarmahto3915]

@@IgniteTechie your have put ! in two field latitude: state.latitude!, longitude: state.longitude!,

[@IgniteTechie]

@@sonukumarmahto3915 Thanks Bro.

[@sonukumarmahto3915]

@@IgniteTechie most welcome bro

[@sroutfit]

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'.

[@DigitalAlchemyst]

did you ever solve this?

[@IdilTugba]

IN MY CASE i had a same type error that because of forgetting "?"; latitude?: string; longitude?: string;

[@hades5509]

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

[@sroutfit]

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'.

[@alantisgreen7011]

The answer is latitude:state.latitude!, longitude:state.longitude!,

[@sroutfit]

@@alantisgreen7011 You are the champ! Thank you much for your suggestion, my error is gone!

[@tarsemlal1720]

Anyone please give me source code

[@dinukajkdy3291]

Can I make this for free?

[@MasumHasanbd]

Anyone have done the complete build? Can you kindly share your GitHub repo?

[@amadeusocean1201]

Sure, PayPal 50 Euros my way.

[@IdilTugba]

sorry but open-moteo is suck. All response are null except temperature :(

[@siddhantmani]

Please give the timestamp.

[@SonnySangha]

Added!

[@siddhantmani]

@@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?

[@andreyokhrimenko2271]

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!

[@randomotaku6684]

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

[@MikeeBuildstech]

Every country is working besides United States 🤦🏾‍♂

[@ericsalvi2711]

I also saw this and I thnk the US has too many cities for it to run correctly.

[@ericsalvi2711]

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!

[@olaleyeoyewunmi6978]

@@ericsalvi2711 can I see how you did that ? Can I have a link to your repo ?

[@joshuaobedoza9499]

po

[@leighadnett931]

I am getting - error SyntaxError: Unexpected end of JSON input at JSON.parse () at AsyncResource.runInAsyncScope (node:async_hooks:203:9) any ideas?

[@andreyokhrimenko2271]

Bro did you fix it? Same error when trying to get data from chatGPT...

[@vmeset]

I have the same problem. Did you fix it?

[@andreyokhrimenko2271]

@@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

[@vmeset]

@@andreyokhrimenko2271 I fixed it making new account

[@adarshmehta8983]

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?

[@ShivamSingh-ld3qf]

same here did you solved it?

[@zishanahmad6830]

Can anyone help with this error ?

[@mdanassabah6448]

did you solved it?

[@yassermohamed9291]

same problem @@mdanassabah6448

[@IgniteTechie]

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)

[@deriboss]

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

[@edwins2056]

@@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

[@ericsalvi2711]

@@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.

[@vmeset]

same error. Did anyone fix it?