Build A Weather App With React JS | Hourly And Daily Forecast
HTML-код
- Опубликовано: 31 май 2022
- Updated video is out | Addressing API issues
• Build A Weather App Wi...
I will show you how to build a weather app with React JS and Tailwind CSS using OpenWeatherMap API. The build will also include hourly and daily forecasts.
Technologies that we will use for this project are JavaScript, React, Tailwind CSS, luxon, unicons, 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.
✅ Source Code & Assets
Watch my new video - • Build A Weather App Wi...
🌎 Connect:
GitHub: bit.ly/3XLS9sg
Instagram: bit.ly/3rtx0aw
Twitter: bit.ly/3rl0NC1
📚 Material:
Openweather API: openweathermap.org/
Tailwind CSS: tailwindcss.com/docs/guides/c...
IconScout: iconscout.com/unicons
luxon: www.npmjs.com/package/luxon
react-toastify: www.npmjs.com/package/react-t...
#react #weatherapp
![Natti Natasha - Quiéreme Menos [Official Video]](http://i.ytimg.com/vi/R57RrTjRGxk/mqdefault.jpg)
![Rich Dunk (Ft. DaBaby) - BIG DAWG [Official Video]](http://i.ytimg.com/vi/Pz2ewsSKAEM/mqdefault.jpg)
Updated video is out | Addressing API issues
ruclips.net/video/SAE_TN2mD3Q/видео.html
Well done bud, love the excitement during the whole process as it shows real passion for the art. Keep it up.
Thank you ☺️
My dude, i was searching for a video to learn and you gave me a video to learn but most importantly to enjoy, very nice video man!
Thank yo ☺️
Exactly doing this as my first React project to my portfolio! I'm already close to finish mine but this gave me some great ideas. This is just gold even after 8 months.👍
Thank you :)
bro is this simple to implement for beginers.. please reply
@@sapphiresmith8356 Not really i think
Amazing video, thanks a lot for your energy and the quality content! Shout out from France!
Good job! One thing to mention, just a personal preference, I agree that tailwind is powerful and clean but I like to use CSS modules for more complex styling
Hello friend what a good video for those who like me are starting programming. I feel like I'm really getting it. Thank you so much and keep doing this. Greetings from Uruguay :D
Thank you Joaquin 😊. I am really happy to know that this video helped you. Good luck with your programming journey 👍🏽.
omggg subscribed imediately!! you have such a good energy and I love have you explain things!! please do more videos!! Love
Thank you! Will do!
Great video! Having a lot of fun going through this!
Thank you ☺️
Hello ! Thank you for your tutorial, I really really loved your energy when coding. I learned a lot of thing in this project, I hope u still keep going your energy like that 😊
Thank you for watching Yanji ☺️
tailwind is just awesome. I had never used it before this project. thank you :)
I know!!! You will never go back to custom CSS. 😬
this is my first time using tailwind and i think i now prefer it to bootstrap
Thanks man! I learned a lot and it looks GREAT!
Glad to hear it!
Brother Yash, Greetings from America. I wanted to write this comment to personally thank you for taking the time and effort to make such a detailed and good video.
It has helped me tie alot of loose ends with my React knowledge and component manipulation. It's only up from here with constant practice!
Bless you sir and I hope your channel grows more and more!
thank you :)
This is a wonderful tutorial, really educative and resourceful. Love the commentary as well.
Thanks a ton. :)
Nice way of doing it. You made me love tailwind. Keep going king
Tailwind is just amazing 😊. Enjoy!!
This is the only instructor witch i can watch his video till the end. Plz make more videos
Thank you ☺️
Amazing video! Keep up the good work. I really like apps UI.
Thanks! Will do!
Thanks, man!!!!
Forte abraço do Brasil, brother!
God bless you!
Thank you :)
You are just Love bro
Thank you Rohail 😊. I will do my best 👨💻.
such great work! just keep doing it. thx man
Thank you for watching. Such comments motivate me to push harder 😎. Stay tuned!!
Really amazing stuf!! Please more of this !
Thank's a lot for sharing this video! Amazing job!
Glad you liked it!
thanks fot your incredible job man, keep doing that
Thank you Eduardo 😊. I will give my best.
you are awesome man 😂 the way of teaching is awesome i can never be bored of you watching...
Thank you so much 😀
Hey~ thank you so much for doing this, I really enjoyed your pacing and you made learning really fun and engaging by being playful, I can feel that you really care about wanting to teach people. I only hope great things for you man~
Glad you enjoyed it!
@@yashpatel1O1 why i can't use the onecall api
bro do you get the hourly and daily forcast..... ia tried to access the end point but i don't get that
+1 for tailwind. I even liked unicorns. Once again great video! 😎
I am glad you liked it. 😃
Using Tailwind is fabulous and really accelerates your time management.
Amazing stuff guys!! Keep it up so, man! Thank you very much for your will!
I am glad that you liked it. Stay tuned for more videos and a course 🙃
Have you successfully run the whole process???
I delayed it..right now i'm going to finish it, hoprfully@@user-od3ci8zw1e
excellent video mate you have a great passion for frontend web app development and you have assisted anda re inspiring me to push for a fullstack career, keep up the good work.
thank you :)
Really amazing project. Waiting for bigger projects. 💛
More to come!
great project man !! Thanks a lot!!
Glad you like it!
Thank you, Yash, greetings from Argentina :)
Thank you for watching Gianlucca
Bro, I was literally drinking water everytime the train arrived. Good Stuff!
Glad you enjoyed!
Great job, helped me a lot! I'm going to go a little further and make it responsive :)
Thank you Valentino 😊. Thats a great idea, Good luck 👍🏽
hey @valentinoomartz how you are going to do that??
Man u earned a subscriber today. cool stuff
Welcome aboard!
You have explained it very well! Great job
Glad it was helpful!
Yo, your style of teaching is very good man ! you don't let us sleep even with the train passing by!
Will you make a same app with react native ?
Or a react native tutorial ?
I have made mobile apps in past using react native so I do have experience. I may put something together in the future.
I wish Railway had API which I can call to figure out when the train is going to pass by 🤣
Thank you for watching 😊
Great work boss!
Thank you Ryan 😃
awesome stuff dude :D
Thank you ☺️
The API that enables hourly forecasts now costs 180$ a month unfortunately so was unable to finish the app. Good energy appreciate the tutorial.
Ohhh boy 😮😮😮😮 really? 😮😮😮😮 is not another alternative in RapidAPI, by example? 🙈🙈
Is the daily forecast free?
is there a free api key for a simple forecast?
Open weather api@@surriiisama8528
bro you're awesome, I have been watching some videos to learn and indeed i could learn but the guy teaching sound so dead, and you're full of life and bringing good content, cheers from brazil
thank you :)
Thanks a lot. You charisma is fantastic
Thanks and welcome
You are the best youtuber I've ever seen
I love the part when you get excited whenever you hit a milestone🤣🤣
thank you :)
Thank you for making these best videos for us to learn new things...
It's my pleasure
Awesome Awesome cool thank for awesome tutorial bro!!!❤❤
I am glad you liked it
Hii I really enjoyed your video, "train has come let's have a water break " 😅😅😅.
Nice job just keep it, bro
Thank you so much 😀. Haha 🤣
Very thorough tutorial.
Thank you Michael 😃
Thanks very much. Very educational and only issue i had was with the openWeather api with the onecall but fixed after subscription.
Glad it helped
Indian teachers have some aura, I feel getting smarter by watching you and your fellow brothers. Love from Eastern Europe!
Thank you ☺️. I am glad that you like my video.
I used to be a diehard standard CSS guy but after following along with your React/Tailwind portfolio video and now currently following along with this Im not sure if I could go back. Tailwind is just so much faster and its awesome
I know right.
Hi , is yours working ? , i keep getting an error saying cannot read properties of undefined ('slice')
° degree symbol for Windows users. Also, you can type ° in code to get the same result.
super cool video ..thank you ..!!!👌❤
Thank you too!
Degree symbol °
Hold down the Alt key, and on the numeric keypad on the right of the keyboard, type 0176 or Alt+ 248 - (for windows)
Thank you so much! very useful!!!!!!!
I am getting Cannot read properties of undefined (reading 'slice')
TypeError: Cannot read properties of undefined (reading 'slice') this error can you help me out
@@virupakshavegi4405 hi , yes it doesn’t work, because now you should pay for another api
But you can do it without it. Without current and hourly weather🤗
It’s even easier 😀
That’s how I did )
I can only say one thing, thank you Yash :)
thank you for watching :)
You really love Tailwind or Tailwind is paying you for this video hahahha good video bro i love your energy and how you explain what are you doing
🤣...Tailwind does not pay me. I do really like it.
The best !!
Thank you ☺️
Worth video💫💫
Thank you :)
Bought the project source code in an instant. Really great value you provided. Awesome job.
Thank you for your support :)
The api is free?.. Is your code running and you are getting the output? I also want to buy it... I am stuck at opencalll😢😢
Does the source code include all the codes for every file or just the API code? Mine is stuck on dt not defined and the API also is not working and I can't resolve it. So if I buy the source code would the project work?
All the guys asking whether the code is working or not, it's evident, right? I wouldn't have praised the guy for great value if I didn't get the results. I would've written a scathing comment about a scam and demanded my money back! I used this code for a personal project of mine and it's running even today without any hiccups. Rest, of course, depends on you. Why should I provide a guarantee to you on a product which I'm not selling? Watch the video to see what's included and what's not.
I have almost completed the project. The only thing that i am stuck at is a dt function. And I only asked for a suggestion to whether the project is working or not. There was absolutely no reason to be rude. If you don’t want to give the guarantee, its totally fine. But you could have simply said yes/no or you could just simply ignore the message. Thank you anyway for such insightful information.
Hello! Thank you for the video, I really enjoyed it. You have awesome energy and tailwind is so easy to use!
Small issure, I get a warning in the console about using keys in the Forecast component, has anyone got a solution?
I have fixed the issue and left a comment to Forecast.jsx. Please take a look.
Thank you Patrick 😃 for pointing out the issue. I am really glad you enjoyed the video.
@@yashpatel1O1 amazing, thank you!
Bro is this application works!!?
@@PatrickPereiraVieira04 can you provide a list of vscode extensions?
Great video! The wind speed numbers change from km/h to mph, but the unit stays the same as km/h.
Thank you. I have another video for weather API. I have handled units in that video.
Thank you for watching ☺️
I hit the API limit at about 80% way through the tutorial :( Great energy on the presentation and fun tutorial overall.
How?????? Did you run API inside a loop 🤣🤣🤣🤣🤣🤣 Anyways come back later and continue, you will be fine 😀
for Windows you have to do ALT 0176 on keypad on right for °
Awesome
Thank you :)
Awesome video! Really enjoyed it and the instructions were easy to follow, really cool plugins! What do you think about bootstrap? Do you believe tailwind is better?
I'm pretty used to using basic CSS and for now, I think I'm more comfortable seeing all the styling in a CSS file together, however, I think using things like tailwind and bootstrap makes you more efficient. I'm a baby developer so still trying to learn
never been fan of bootstrap. love tailwind!!
love the vid
thank you
awsome video
Thank you ☺️
finally, i found a guy with tailwind expertise......
THANK YOU
Tailwind I also love 😍 😍
good to know
great video Yash, bought you a coffee :) quick question: is there any way to search lat and lng in the search box? or is it city/country only?
You can implement that if you wish. I implemented city search because that make sense for most of the audience. If you need any more help with the logic do let me know.
On Line 19 on your App.jsx, would query.q always evaluate to first operand since query.q will always equal query.q even if it is falsy?
Would it better to have it as query.q || "current location."?
could you tell me which extension you use for auto suggestion for give classname
good video, I made an advanced weather app myself with react-typescript and openweather too. I'm wondering what your vsc theme is?
ayu mirage
A small suggestion. Please open the output window aside and show the instantaneous changes occurring for each command. It would be much easier to follow. Just thoughts. Thanks.
Thanks for the tip!
Hey man - great vid and presentation style!
Quick question.. Why/how does your Hello World's default to the centre of your page without any styling???
timestamp?
i loved the city named spain
Yes! Great country 😊
But without s
🤣
nice video , good energy , Just one thing, you forgot to change the wind speed km/h 😅
Yes, I realized later once I uploaded the video. 🤣
Thanks for the video. I have a question relative to IconScout. When I install it, it shows many vulnerabilities that can't be fixed, and most of it is deprecated. Do you have any suggestions as to using another Icon source?
try using react icons
im having a problem, i need the link for the images you used , is that possible ?
When u started to use the API keys, during the test... how did you get it to format like that in google?
I have a brwoser extension called JSON view
hello i have question about how editor take the classname in h1 another color in 07:37 is that from vs code or what and thanks
i have done two projects and i think it is way better than bootstrap
I know right!!
Nice video, thanks. But I don't saw where was getGeolocation function?
Its part of JavaScript API.
Do you correct old version with openweathermap to version 3.0?
I asked becouse I bought this API, but it doesn`t work with your code. I think they closed the search by city name. I have to use lan and lon params to get data. So I think now what is better for me - finish this version or change my way. I can buy your code if it works now.
But if it doesn`t work I prefer another way.
I`ll be glad to see your answer!
Thank you!
there are 2 source code when you buy it
one with openweather api which required credit card
second with another free api
hello, thank you very much for the video, i have noticed that for the free plan on openWeather the daily forecast and weekly is not available, the tutorial was great
Really?? 🥹🥹🥹
Same here, bro
@@preciousebere8060 you can get the free subscription
1:08:34 im doing exactly what you are doing but i cannot see the console.log - it's saying "Uncaught in promise - getWeatherData is not defined" . What should I do?
ok my bad:)))))) i forgot to import getWeatherData from weatherServices..all good now
has anyone else tried to do this recently? I am getting errors related to babel when trying to add unicons to the page :(
I think its related to them not being compatible with latest version of react? Someone help!
brothers 🤗
haha
new sub my friend
Welcome to the family 👨💻
I'd love to see the project redone with a different API since OpenWeather onecall is now paid. Great video anyway!
Do you know of any Weather API that I can use and is free?
Wow, no wonder I was having authentication issues right there.
WeatherAPI is good free alternative
Thank you Yash, it is a great tutorial. One question, I managed to fetch the current weather but failed to fetch the hourly and daily weather APIs. Do I have to pay in order to be able to fetch the hourly and daily APIs?
pricing has changed on API side since I uploaded the video
Hi, When trying to add cities it is not coming on that div. cities are getting added to below div.could you please help
compare it with my code
I am getting the following error: please can someone help?
service.js:46 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'slice')
HEy Yash! awesome vid. One quick question, do we have to pay for API subscription or the free api would do the trick, cause i can't seem to get the response for onecall. Forecast and weather returns fine.
You should br fine with free API
@@yashpatel1O1how??
Its already more than 1 day, but the api key is not activated i guess. Only the topbutton and input section are shown and not forecast section in your github project as well.
Please respond!
okay the Problem was there because onecall api is for paid subsription.
Hello Yah, awesome class I really enjoyed and learnt a lot but I have difficulty with the onecall, it keeps reading 401 error, but the current weather displays. Do I need to subscribe to use the API for it to display on my web app
Yes, you need to subscribe.
@@yashpatel1O1 do i need to pay for this ?
Do you got the solution
Sorry, quick question. Do you need to have a paid subscription to the Open Weather API in order to gain the daily and hourly forecasts? It appears to cost $180/month which is a bit pricey. My app is stuck with no information showing and I'm not sure where to turn.
yes but you won't be charged
@@yashpatel1O1 Thanks a million brother
Did you pay, or how did you resolve this issue
hello, I am getting error in this while doing the hourly forecast and daily it vanishes all while doing it through items
Openweather API has switched to paid plan. So your hourly forecast is not working.
Any idea why i get infoType is not defined? In my GetWeatherData?
probably a typo
brother but you have to use the paid api key then only the paid hourly and daily api key will fetch the data ?
New video is out wit the fix