How To Make Weather App Using React JS 2024 | Weather API React Project Tutorial

[@kowshikaryavir]

Thanks a lot, I've completed my university project with this tutorial. it saved me. Happy coding.

[@DanyalMoazzamJann]

btw you can also run command "npm create vite . --template react" for initializing the project.

[@sanketpathak6621]

Thank you. This is by far the most easy to understand tutorial. Plase bring more tutorials for reactJS.

[@GreatStackDev]

Glad you liked it Sanket. Thanks for your comment. 😊 Keep Coding.

[@runningmanslowly9072]

bro can u pls send me source code

[@sanketpathak6621]

@@runningmanslowly9072 yeah I'll

[@razeenmeeran9889]

Recognizing this from the old js, css and html video ❤❤

[@Sneakingmentor]

Ya bro 😅

[@Nonymouz]

why do i always feel like html css and js are easy when compared to react lol

[@GreatStackDev]

Yes, and this one was built using React Js.. Thanks for your comment. 😊

[@danialnawawi9110]

I really like the way you teach us one by one so that we can understand. Thanks and can't wait for more project.

[@GreatStackDev]

Glad you liked it. Thanks for your comment. 😊 Will surely do more projects like this.

[@Anon-h3q]

Thank you a lot, I've already made a React app using API but had such a mess in my head, now everything is absolutely clear (just like the weather, haha)

[@GREEKGODPLAYZZ_1126]

Did you had any problem in api calling?

[@fitnessfreak984]

Please bring tailwind css in it and you keep bringing more projects ❤❤ love it

[@GreatStackDev]

Sure, Will do it. Thanks for your comment. 😊

[@OdysseySoulful]

The way of your teaching is amazing.

[@GreatStackDev]

Glad to hear that. Thanks for your comment. 😊

[@noufalriyasm9344]

Could you please make a video on how to deploy vite-react-app in git pages? It will be very helpful for beginners

[@ajiteshmishra0005]

Your explanation is very good. Please create one video on Redux as well as Redux Toolkit on any React Project from scratch with small and large data so that every concept can be cleared. We can answer every interview questions smoothly.

[@pavankumar-of4ew]

problem with API key , it is getting unauthorized while calling city

[@mohinishjain8588]

Yes

[@reyu_]

same problem, how do you solve it ?

[@GREEKGODPLAYZZ_1126]

Bro did you solved it?

[@reyu_]

@@GREEKGODPLAYZZ_1126 hey its because your .env file is inside the src folder thats how I solved it

[@pavankumar-of4ew]

@@reyu_ Same problem i didn't call API_KEY properly from .env file

[@cranticumar9888]

sir in react js project, how to access that .env variable. like this not work sir, const wAPI = process.env.whetherApi . in my .env ---> (whetherApi = ''adndndddmddmd') wAPI I assigned in which you assign 'VITE_WHETHER_API'

[@aadhi4821]

Sir can you put a video for react js full course really like your teaching method.😊

[@NoHandles2654]

Can You please Create a transportation Website that shows that trucks could carry goods from one place to another by using Api that tells the area location and a responsive pages using react and Backend.🙌🙌

[@soumyanayak-bx7ci]

i can do it

[@thabangreymondsehlako5741]

You are a good teacher.Your tutorials are easy to follow. I so wish you can give us more react tutorials ❤

[@GreatStackDev]

Thank you, I will

[@Rose-gb1ku]

Easy to implement thank you !

[@GreatStackDev]

Glad it was helpful! Thank you. 😊

[@Applecitylightkiwi]

Congrats i remember the first one you made, i learnt that one well

[@GreatStackDev]

Glad to hear that! Thanks for your comment. 😊

[@rayblinks2me]

Thank you very much for your efforts! Project is great for beginners and it shows so much information. From React hooks, to jsx, creating react app using Vite, Fetch, API requests, Google dev tools, async code, try catch code blocks with alerts, ternary's and so much more. Great project!

[@runningmanslowly9072]

bro can u send me sorce code

[@preranaattarde8297]

Excellent Project and API is very fast Working👍👍

[@StephenJoshi-p9e]

does the new 3.0 also have city place for API, could you please share the link I cant find it

[@hunterhalvorson6223]

PSA, if you have never used openweatherapp, your api may take a couple hours to load

[@GREEKGODPLAYZZ_1126]

So what to do till then should i close my vs code??

[@MimicMannan]

That is simply not true. I built a weather app using this API just today and it's working absolutely fine. ​@@GREEKGODPLAYZZ_1126

[@sanketpathak6621]

Awesome video sir❤

[@GreatStackDev]

Glad you liked it. Thanks for your comment. 😊 Keep Learning.

[@mayankvaidh]

The project is very awesome. Sir, please make one video for deploying food app on vercel.

[@S..k..R]

Thank you 💙

[@melvinbruce975]

Thank you bro just finished this tutorial really great video

[@SarathkumarKilli]

Best explanation. But whenever I use Axios instead of the fetch method, the state variable is not updating and also the data is not rendering on the browser. Why?

[@hussainzaidi110]

video will start at 8:13

[@YouTubeMastery101]

thanks sir i complete this time

[@abhinandpappu8865]

hlo i have a dout ,that is in image cartoonising website like colorinch when we apply any of the effects we can adjust that effect on the front end .how to do that progragrammatically

[@RRBLP]

Hi there, when you add a space after the city name, it causes the app to malfunction and show the empty fragments. only to then show the actual city. How do we fix this issue? otherwise great video :D

[@GreatStackDev]

add trim() method on input data

[@minseokkim-y9f]

Everything was perfect, but I didn't get images folder on my desktop after set up. How can I get thoes image files? or other way ?

[@HoangPham-gz5nm]

Hi, Thank you for your lecture, it is so helpful and undstandable but after I get API in the website and paste it into my code, it shows that 'Invalid API key', can you help me, thank you!

[@ManieshSanwal]

please let us know your vs code colour theme. I genuinely like this 🤗🤗

[@ezeprince9974]

Nice one. Any idea of building a contour coordinates in python?

[@paintingitsalifestyle307]

thank you ❤❤

[@itsmjns23]

hi can you create an project like mern but the database is Google Sheets 😅 and an affiliate website where to promote affiliate products with links and a backend Hope to be noticed

[@pileydes]

Thanks a lot.

[@CLaahiCalimaxamed]

Hey teacher ❤

[@GreatStackDev]

Thanks for your comment. 😊

[@gokulrajpalanisamy235]

Sir, Great content❤❤ Plz create LMS website using MERN STACK (using react) with all admin functionalities ❤

[@H.CWebDeveloper]

Sir please make next js project

[@GreatStackDev]

Sure, Will do it soon. Thanks for your comment. 😊

[@kunalsin]

We need more small and this type projects

[@GreatStackDev]

Sure, Will do more like this. Thanks for your comment. 😊

[@_gazer_730]

How do I deploy this project into my GitHub

[@hafismohammad495]

thank you so much

[@saranrajmeee60]

Can you show output in side screen it will very clear for us

[@anish2374]

when we load our page on the browser, it shows the alert box saying, enter city name for 2 times , how to fix this issue?

[@drteddyweb]

How can I use also the enter key in when I type a city and not only the search icon?

[@soumodeepdey8081]

Sir can you tell me how to run this project in the terminal of VS Code?

[@Fred-my9er]

thank you

[@Techtto]

wow very nice

[@AfnanAbbasi-g4b]

Can we axios instesd fetch method?

[@Bscwala1]

caret blink animation how do u do that

[@Zina-ox2dm]

dont forget to npm i openweather-apis

[@saivutukuri-o3d]

Please make more videos on react

[@GreatStackDev]

Sure.. Will do more.. Thank you.

[@LeonardMuriuki-jh5hc]

design a tutorial on how to make a clone for uber if you wont mind

[@itsmjns23]

Can you tutorial for creating a checkout page for e-commerce stores

[@GreatStackDev]

Already created checkout and online payment for food order full stack project tutorial

[@itsmjns23]

@@GreatStackDev uhm link??

[@PraveenKumar-tw4pu]

Please do it with tailwind css, so that it's responsive

[@IbrahimAbdi_]

Gang are here

[@SbPlays17]

🎉🎉🎉

[@GreatStackDev]

Thanks for your comment. 😊

[@uxmisbahh]

How can you detect the Enter key press in a search input instead of clicking the search icon ? Can anyone help?

[@raghavendrasangam]

3:30 - Should we just ignore npm WARN deprecated message or is there any solution ? . I am getting same thing while creating app

[@sparshrlohana2288]

There's no need to worry, chill

[@lullimongal]

Build a full frontend website

[@GreatStackDev]

Will do it. Thanks for your comment. 😊

[@RRBLP]

I am running into error "Failed to load resource: the server responded with a status of 429 (Too Many Requests)" after completing the video. Do you know how to fix this?

[@Efizzy_brendan]

Thanks boss

[@GreatStackDev]

Welcome.

[@martinnjeri6997]

great turtorial, i honestly love watching and following a long, and each time im getting better.... i have a work related proyect, anyone who would like to colaborate?

[@GreatStackDev]

Great to hear!

[@sparshrlohana2288]

I would like to colab

[@martinnjeri6997]

@@sparshrlohana2288 how do i reach you to share the details of the project?

[@kaustubhbhatt7830]

@GreatStack it is not showing data on webpage but showing on console what should i do

[@vikassoni7882]

Everything else.hi very good, but I don't like using plain CSS for every component makin unnecessary files Bring tailwind instead and improve folder structure.

[@ebrahimakanda7391]

Please! Make a video for currency converter.

[@vaishnavikalkekar3329]

Sir mere me na console ka object nahi dikh raha hai please sir how to solve it

[@saikrishnagoud1919]

Getting useffect dependency ⚠️ warning, can u please help!!

[@Adityatagwale19]

sir, please can you make a project or website by using HTML, CSS, Javascript, Php, and MySQL. frontend and backend with explanation.

[@farispepic]

Do you can this to write on second way?

[@ravishbisht502]

Which theme do you use sir ?

[@GreatStackDev]

Brackets

[@techlyticalwithaswini8379]

Sir front end developer related interview questions with answers video need

[@namanhayaran6833]

bro data.message ka data kese aaya if city name is not right can you explain

[@coder40208]

Sir design hamesa same hi rahta he

[@akhilmanissery3666]

I am facing issue on fetching the weather details did anyone face that kind of issue?

[@CricGamerz12]

I am getting problem at console Error 401 is showing

[@aminashahid2818]

Same error.. have you resolve this issue?

[@just_peace5669]

facing the same issue.. how to fix this?

[@kaushikupadhyay4112]

​@@aminashahid2818what about now? what was the problem?

[@godneo2190]

im getting error of undefined reading 0 how to resolve it can anyone help me

[@Splqtrmaster49]

My API key didn’t work

[@TBMREBEL]

Bhai aap. env ko kisi folder ke ander toh nhi rakhe ho

[@ravii4888]

What would have more impact on a resume: this weather app (React) or the previous one made with HTML, CSS, and JS?....please reply

[@idevkr]

React

[@razak-attar]

it will not work in production right sir? I have deployed it on versal not working..!! @GreatStackDev Edit: it will work. Thanks..!!

[@kavindudeshappriya9201]

How long it took to fix that ?

[@RRBLP]

did you fix this issue?

[@nerathevannuavan4974]

Yo Bro Reply Here

[@razak-attar]

Yes guys?

[@pallavipradhan156]

in my vscode terminal i wote the command but it shows that npm is not recognized so please tell me how to correct it

[@GreatStackDev]

First install node js from below link nodejs.org/en/download/prebuilt-installer

[@pallavipradhan156]

@@GreatStackDev Thank you so much I will do it further if any doubt I will ask you

[@kaustubhbhatt7830]

it's not showing data on webpage what should i do

[@anzarkhan599]

how to i get current date and time

[@lsvlog0007]

Could you please share git link?

[@amaztech-tb5rg]

i have installed react app with out vite how should i create env with name

[@just_peace5669]

same here were you able to make it work?

[@biswajitadhikary_0807]

Hi, can you please provide me the link of the source code?

[@Kiran23456]

Tq

[@GreatStackDev]

🤝

[@SatyanshSingh-k7m]

make some tutorial in react native

[@ZeeshanKhan-x6h7j]

how to convert thisproject to antD?

[@kushalbrahmbhatt4890]

bhai code bhi de hi deta , aadha project ho kr data load nahi kar raha aur error bhi pata nahi chal rhi

[@NarasimhaCharithartha]

sir is this responsive also

[@AzeemButt.x]

can you please send the source code there is a isuue of my api linking

[@kumarishivaswamy531]

THE API website is throwing error

[@kumarc4989]

unable to link api...its shows eroor 401

[@Brago475]

import the api direclty weather no need for vite

[@coding_priyan_ca]

Hey I am facing this issue Status: 401 Unauthorized

[@prabhavishukla870]

Did you get the solution?

[@bhishek_]

1:09 Delhi 41°C 💀

[@adityaranjan8473]

Sir, my API calling is not working

[@idevkr]

Verify your api key

[@prabhavishukla870]

Did it work now?

[@adityaranjan8473]

No

[@callmegx]

Source Please 🥺

[@partyhard1787]

my timecode 26:24

[@runningmanslowly9072]

source code anyone pls

[@harshavardhandandibhotla]

Why my weather API key isn't working? Even after the activation done

[@prabhavishukla870]

Same.Did you get the solution?

[@harshavardhandandibhotla]

@@prabhavishukla870 Yes Worked ma'am after a day

[@harshavardhandandibhotla]

@@prabhavishukla870 Yes ma'am after a day it had worked for me

[@ravikantsrivas]

@@prabhavishukla870 did you get the way to resolve?

[@Everyday_.Islam.]

How can i activate the API key?