Build A Weather App With React JS | Hourly And Daily Forecast | 2024

🚀 React 18 + TypeScript Course - 50% Discount
codewithyash.com/
✅ Source Code & Assets
buy.stripe.com...
🌎 Connect:
Instagram: bit.ly/3rtx0aw
Twitter: bit.ly/3rl0NC1
Email: [e-mail]
I will show you how to build a weather app with React JS and Tailwind CSS using OpenWeatherMap API. API is completely free to use. The build will also include hourly and daily forecasts.
Technologies that we will use for this project are JavaScript, React, Tailwind CSS, luxon, react icons, and react-toastify. It is going to be amazing to work on this build. We will fetch data from OpenWeather endpoints. We will be getting temperature, max, min, humidity, real feel, sunrise, sunset, hourly, and daily forecast. We will also display the local time at the selected location. For input, there are some quick links on top along with a text box for searching a city and also a current location-based search.
📚 Material:
Openweather API: openweathermap...
Tailwind CSS: tailwindcss.co...
IconScout: iconscout.com/...
luxon: www.npmjs.com/...
react-toastify: www.npmjs.com/...
#react #weatherapp

[@Mohitsahachowdhury]

Just a quick note about wind speed in OpenWeather: for the metric system, it is shown in meters per second (m/s), and for the imperial system, it is shown in miles per hour (mph). Thank you so much for the updated video; it has been very helpful for my learning journey.

[@yashpatel1O1]

thank you for watching.

[@nikamura7559]

Thank you so much @Yash Patel, I am in min 48 and I am enjoying a lot, Everything works fine for the moment. Very easy to understand you are a good teacher. I get the city and country in 3 days forecast, just changing the lat and lon for "q=citie" in the URL and it's work fine

[@kotabis]

listening to you get excited over things working out is actually keeping me motivated. Amazing work!

[@bhavkushwaha]

Awesome work brother, it was a very helpful video. Followed along also paused the video and coded some parts myself. Everything works fine. There was one issue with data not working when passed by .then() in App.jsx. Kept it the way it was originally was i.e. const data = await getFormattedWeatherData({ ...query, units }).then( (data) => { setWeather(data); } Everything works fine, great work buddy! Thanks a lot. Edit: PS the website made above is not mobile-friendly, I will have to do it on my own.

[@ryanarkhan4424]

can i get your code for mobile responsive?

[@ojitxs]

Thanks you! 🙌🙌

[@wardkelvin]

I will finish this project and improve it :))) Thanks for your video...

[@HrishikeshDeshmukh-q1k]

Great Work Sir, Perfectly Step By Step tutorial. I love it.

[@rishitsingh7195]

Bhai is it working for me weather API is not working it is showing 401 error even after 1 week API is not activated

[@HrishikeshDeshmukh-q1k]

@@rishitsingh7195 My api Key has been activated within 2 hrs, and i got api key in the email. But sometime the main openweathermap website is out of reach.

[@viniciusm.m.7822]

Thanks, Yash! Best regards from Brazil. God bless u!

[@yashpatel1O1]

Thank you for watching :)

[@besnik2666]

Great project Yash! But I have a question sometimes when I change the metric on cold cities from Celcius to Farenheit it changes the background from blue to orange how to fix this ?

[@emmanuelchukwuma9589]

can not see the video on the typescripts and react course i love your weather app

[@LetsFly96]

Great tutorial, Yash! You are easy to follow, I love that you stop and pause for copying and give clear directions and tips :) I do have one question -- could you make a video on how to add some sort of Autocomplete/Suggest function to the City search bar? Since there are some places that have the same city name -- i.e. Peoria, IL and Peoria, AZ in the US. I worry that people who live in cities with a very common name would have trouble getting an accurate search.

[@bestvideos103]

thank you so much for this amazing video

[@yashpatel1O1]

Thank you for watching

[@ddas2-v9o]

The video was great but i am getting data of 6-10 minutes earlier data like it is 10:26 here but it is displaying 10:19 in the °C but in the °F it is showing correct time

[@rishitsingh7195]

can you share your github link i am getting problem

[@lavkeshprasad7040]

thank you bro , you are the best

[@yashpatel1O1]

I am glad that you watched. Thank you :)

[@lavkeshprasad7040]

@@yashpatel1O1 i have also made the previous weather application same as this, with react

[@yashpatel1O1]

amazing. previous is not working anymore because of API changes.

[@guggliamsaiprabhat8513]

you got the same dimension how he got or any change

[@RaviRaJ-mz1cf]

Hello, Yash! I was following your previous video on Weather App but I got error there . Now I followed this video and completed the project and every thing looks fine. thank you🤗

[@yashpatel1O1]

you missed something during the video. Just follow it again, I am sure you will be able to fix it.

[@RaviRaJ-mz1cf]

@@yashpatel1O1 thank you so much

[@piyushgupta7259]

How can we make it respponsive for every device like phone and tab ??

[@matejsfitness2242]

How can I fetch the hourly data? It shows error 401. It can't be used for free.

[@mishalqamar7302]

How did you get the 5 day forecast from the 3 hourly forecast not clear ? You took average?

[@yashpatel1O1]

nope. we are taking each days weather at 12 pm. You can do average if you want to.

[@rishabhmishra3502]

maza agya bhai

[@martinyates353]

Hi, very good tutorial, I just have 1 issue the 3 hour step forecast repeats across the screen? the daily is fine, I just can't track the error??

[@martinyates353]

I found it! was the slice I'd entered (0.5) instead of (0, 5) 😁

[@yashpatel1O1]

great job

[@vijayanand9368]

In this project using typescript?

[@vasugarg2055]

I think you should improve your way of teaching a genuine feedback

[@УрматАликов-ш8г]

Why horizontalDetails it not definite

[@AnshuPatel-u1t]

Great work, but atleast provide assets for free

[@shubham-ri4re]

at 1:33:19 instead of ahmedabad i am getting undefined

[@veerainejay]

Did you find the solution?

[@rudraksh5103]

1:38:34

[@vishalisharma9508]

Sir i m getting issue in accessing weather api its show 401 error that it is invalid reason is it take some hour for activation like default also take time for activation?

[@zanies6288]

how much time does it take?

[@shivampandey6814]

Bhai it is not responsive, what should i do to make it responsive?

[@simileoluwa.oludare]

Thank you so much. I am from Nigeria. I will share the link with you for correction when i am through. Thank you. please do the typescript video then if possible, how to use tailwind in building responsive websites from scratch. thank you

[@DalazG]

Thanks for the tutorial! i have been trying to follow along. up to 25 minutes but one problem For some reason, the blue background is not loading. Any idea? would love to see the github for this

[@yashpatel1O1]

Thank you for watching. You may have made spelling mistake somewhere in tailwind classes. Double check it.

[@DalazG]

@@yashpatel1O1 i think i triple checked it, maybe some mess up with installing the react library but not sure

[@SoloRunner-j7u]

so after gone throw the vdo....this is for mid level developers....don't try beginners bcoz u will get frustrated...like me