Build A Weather App With React JS | Hourly And Daily Forecast | 2024
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 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: yashpatel26@gmail.com
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
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.
thank you for watching.
listening to you get excited over things working out is actually keeping me motivated. Amazing work!
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
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.
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.
can i get your code for mobile responsive?
I will finish this project and improve it :))) Thanks for your video...
How can we make it respponsive for every device like phone and tab ??
How can I fetch the hourly data?
It shows error 401. It can't be used for free.
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
can not see the video on the typescripts and react course i love your weather app
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🤗
you missed something during the video. Just follow it again, I am sure you will be able to fix it.
@@yashpatel1O1 thank you so much
How did you get the 5 day forecast from the 3 hourly forecast not clear ? You took average?
nope. we are taking each days weather at 12 pm. You can do average if you want to.
Great Work Sir, Perfectly Step By Step tutorial. I love it.
Bhai is it working for me weather API is not working it is showing 401 error even after 1 week API is not activated
@@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.
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??
I found it! was the slice I'd entered (0.5) instead of (0, 5) 😁
great job
Thanks, Yash!
Best regards from Brazil.
God bless u!
Thank you for watching :)
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?
In this project using typescript?
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
can you share your github link i am getting problem
Thanks you! 🙌🙌
Bhai it is not responsive, what should i do to make it responsive?
Why horizontalDetails it not definite
thank you so much for this amazing video
Thank you for watching
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
Thank you for watching. You may have made spelling mistake somewhere in tailwind classes. Double check it.
@@yashpatel1O1 i think i triple checked it, maybe some mess up with installing the react library but not sure
maza agya bhai
thank you bro , you are the best
I am glad that you watched. Thank you :)
@@yashpatel1O1 i have also made the previous weather application same as this, with react
amazing. previous is not working anymore because of API changes.
you got the same dimension how he got or any change
1:38:34
Great work, but atleast provide assets for free
I think you should improve your way of teaching a genuine feedback
at 1:33:19 instead of ahmedabad i am getting undefined
Did you find the solution?
so after gone throw the vdo....this is for mid level developers....don't try beginners bcoz u will get frustrated...like me