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

🚀 React 18 + TypeScript Course - 50% Discount

✅ Source Code & Assets

🌎 Connect:

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:

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

[nikamura]

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.

[wardkelvin]

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

[HrishikeshDeshmukh-qk]

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

[viniciusm.m.]

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

[bestvideos]

thank you so much for this amazing video

[LetsFly]

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.

[besnik]

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 ?

[matejsfitness]

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

[ddas-vo]

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

[piyushgupta]

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

[RaviRaJ-mzcf]

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🤗

[emmanuelchukwuma]

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

[mishalqamar]

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

[martinyates]

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

[vishalisharma]

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?

[shubham-rire]

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

[shivampandey]

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