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

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

[@yashpatel1O1]

Updated video is out | Addressing API issues kzbin.info/www/bejne/iXKokIeEZ9J3abM

[@raywright8127]

Well done bud, love the excitement during the whole process as it shows real passion for the art. Keep it up.

[@yashpatel1O1]

Thank you ☺️

[@viktorberczeli2343]

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

[@yashpatel1O1]

Thank you :)

[@sapphiresmith8356]

bro is this simple to implement for beginers.. please reply

[@SerafinBGG]

@@sapphiresmith8356 Not really i think

[@thamismedina6394]

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!

[@yashpatel1O1]

Thank yo ☺️

[@aricol5793]

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

[@tomtats2]

Amazing video, thanks a lot for your energy and the quality content! Shout out from France!

[@YanjiGuy]

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 😊

[@yashpatel1O1]

Thank you for watching Yanji ☺️

[@turing7591]

tailwind is just awesome. I had never used it before this project. thank you :)

[@yashpatel1O1]

I know!!! You will never go back to custom CSS. 😬

[@akenjinicole1499]

this is my first time using tailwind and i think i now prefer it to bootstrap

[@themindhelp9584]

omggg subscribed imediately!! you have such a good energy and I love have you explain things!! please do more videos!! Love

[@yashpatel1O1]

Thank you! Will do!

[@joaquinmelogno5008]

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

[@yashpatel1O1]

Thank you Joaquin 😊. I am really happy to know that this video helped you. Good luck with your programming journey 👍🏽.

[@viniciusm.m.7822]

Thanks, man!!!! Forte abraço do Brasil, brother! God bless you!

[@yashpatel1O1]

Thank you :)

[@zym0tic428]

Great video! Having a lot of fun going through this!

[@yashpatel1O1]

Thank you ☺️

[@nuveon8125]

Really amazing stuf!! Please more of this !

[@user-ss2jr8ss8l]

This is the only instructor witch i can watch his video till the end. Plz make more videos

[@yashpatel1O1]

Thank you ☺️

[@mylesgideonprospero]

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~

[@yashpatel1O1]

Glad you enjoyed it!

[@sapphiresmith8356]

@@yashpatel1O1 why i can't use the onecall api

[@sapphiresmith8356]

bro do you get the hourly and daily forcast..... ia tried to access the end point but i don't get that

[@bamboo5287]

Amazing video! Keep up the good work. I really like apps UI.

[@yashpatel1O1]

Thanks! Will do!

[@erebor769]

Nice way of doing it. You made me love tailwind. Keep going king

[@yashpatel1O1]

Tailwind is just amazing 😊. Enjoy!!

[@CarhanC360]

Thanks man! I learned a lot and it looks GREAT!

[@yashpatel1O1]

Glad to hear it!

[@8bitWatermelon]

This is a wonderful tutorial, really educative and resourceful. Love the commentary as well.

[@yashpatel1O1]

Thanks a ton. :)

[@colinmccullough2733]

The API that enables hourly forecasts now costs 180$ a month unfortunately so was unable to finish the app. Good energy appreciate the tutorial.

[@javiersistemas]

Ohhh boy 😮😮😮😮 really? 😮😮😮😮 is not another alternative in RapidAPI, by example? 🙈🙈

[@onehourclassroom1723]

Is the daily forecast free?

[@surriiisama8528]

is there a free api key for a simple forecast?

[@sujalGhorse-xh8bs]

Open weather api​@@surriiisama8528

[@abhaydange1207]

Bro, I was literally drinking water everytime the train arrived. Good Stuff!

[@yashpatel1O1]

Glad you enjoyed!

[@rohailahmad5971]

You are just Love bro

[@yashpatel1O1]

Thank you Rohail 😊. I will do my best 👨‍💻.

[@TetianaKozer]

Thank's a lot for sharing this video! Amazing job!

[@yashpatel1O1]

Glad you liked it!

[@quantontheway]

such great work! just keep doing it. thx man

[@yashpatel1O1]

Thank you for watching. Such comments motivate me to push harder 😎. Stay tuned!!

[@dalestewart]

Using Tailwind is fabulous and really accelerates your time management.

[@shaivipatel7154]

+1 for tailwind. I even liked unicorns. Once again great video! 😎

[@yashpatel1O1]

I am glad you liked it. 😃

[@vahxs]

Amazing stuff guys!! Keep it up so, man! Thank you very much for your will!

[@yashpatel1O1]

I am glad that you liked it. Stay tuned for more videos and a course 🙃

[@user-od3ci8zw1e]

Have you successfully run the whole process???

[@vahxs]

I delayed it..right now i'm going to finish it, hoprfully@@user-od3ci8zw1e

[@eduardosantos9160]

thanks fot your incredible job man, keep doing that

[@yashpatel1O1]

Thank you Eduardo 😊. I will give my best.

[@celestialStark]

you are awesome man 😂 the way of teaching is awesome i can never be bored of you watching...

[@yashpatel1O1]

Thank you so much 😀

[@PeIeus]

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.

[@yashpatel1O1]

thank you :)

[@pahaadiDev]

great project man !! Thanks a lot!!

[@yashpatel1O1]

Glad you like it!

[@FirstHighFlight]

Great job, helped me a lot! I'm going to go a little further and make it responsive :)

[@yashpatel1O1]

Thank you Valentino 😊. Thats a great idea, Good luck 👍🏽

[@celestialStark]

hey @valentinoomartz how you are going to do that??

[@user-wu1ki7xg4s]

Really amazing project. Waiting for bigger projects. 💛

[@yashpatel1O1]

More to come!

[@rl6382]

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!

[@yashpatel1O1]

thank you :)

[@flash1652]

° degree symbol for Windows users. Also, you can type ° in code to get the same result.

[@Bodeblack]

You are the best youtuber I've ever seen I love the part when you get excited whenever you hit a milestone🤣🤣

[@yashpatel1O1]

thank you :)

[@_r.code_]

You have explained it very well! Great job

[@yashpatel1O1]

Glad it was helpful!

[@code_cracker]

Man u earned a subscriber today. cool stuff

[@yashpatel1O1]

Welcome aboard!

[@gianluccabolocco8058]

Thank you, Yash, greetings from Argentina :)

[@yashpatel1O1]

Thank you for watching Gianlucca

[@ranveerancharaz6732]

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 ?

[@yashpatel1O1]

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 😊

[@ryanmilligan7152]

Great work boss!

[@yashpatel1O1]

Thank you Ryan 😃

[@estagiario-dj9ww]

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

[@yashpatel1O1]

thank you :)

[@igooody4988]

Thanks a lot. You charisma is fantastic

[@yashpatel1O1]

Thanks and welcome

[@computertraining4229]

Thank you for making these best videos for us to learn new things...

[@yashpatel1O1]

It's my pleasure

[@michaelanthony4750]

Very thorough tutorial.

[@yashpatel1O1]

Thank you Michael 😃

[@valeriotorroni1602]

Awesome Awesome cool thank for awesome tutorial bro!!!❤❤

[@yashpatel1O1]

I am glad you liked it

[@quantumvflux]

awesome stuff dude :D

[@yashpatel1O1]

Thank you ☺️

[@arttrip6659]

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)

[@betterbehappythannot3605]

Indian teachers have some aura, I feel getting smarter by watching you and your fellow brothers. Love from Eastern Europe!

[@yashpatel1O1]

Thank you ☺️. I am glad that you like my video.

[@yesufhassen7422]

Thanks very much. Very educational and only issue i had was with the openWeather api with the onecall but fixed after subscription.

[@yashpatel1O1]

Glad it helped

[@GoodGuyHeffy]

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

[@yashpatel1O1]

I know right.

[@oruebormanasseh1932]

Hi , is yours working ? , i keep getting an error saying cannot read properties of undefined ('slice')

[@justaRidhaMthinGs]

super cool video ..thank you ..!!!👌❤

[@yashpatel1O1]

Thank you too!

[@olhasotova3589]

Thank you so much! very useful!!!!!!!

[@virupakshavegi4405]

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

[@olhasotova3589]

@@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 😀

[@olhasotova3589]

That’s how I did )

[@adestar5417]

Bought the project source code in an instant. Really great value you provided. Awesome job.

[@yashpatel1O1]

Thank you for your support :)

[@deepakumari-yf1tr]

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

[@gaurityagi6944]

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?

[@adestar5417]

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.

[@gaurityagi6944]

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.

[@havenrutter-shelden1767]

for Windows you have to do ALT 0176 on keypad on right for °

[@bryansanudogarcia1691]

I can only say one thing, thank you Yash :)

[@yashpatel1O1]

thank you for watching :)

[@arbabnadeem427]

Hii I really enjoyed your video, "train has come let's have a water break " 😅😅😅. Nice job just keep it, bro

[@yashpatel1O1]

Thank you so much 😀. Haha 🤣

[@PatrickPereiraVieira04]

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?

[@yashpatel1O1]

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.

[@PatrickPereiraVieira04]

@@yashpatel1O1 amazing, thank you!

[@volvosh1236]

Bro is this application works!!?

[@itech_1]

@@PatrickPereiraVieira04 can you provide a list of vscode extensions?

[@whoareyou5875]

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

[@yashpatel1O1]

🤣...Tailwind does not pay me. I do really like it.

[@aditya-d-]

Tailwind I also love 😍 😍

[@yashpatel1O1]

good to know

[@sarahabousenna9166]

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

[@yashpatel1O1]

never been fan of bootstrap. love tailwind!!

[@mydhiliy1655]

Worth video💫💫

[@yashpatel1O1]

Thank you :)

[@eatyourface420]

Great video! The wind speed numbers change from km/h to mph, but the unit stays the same as km/h.

[@yashpatel1O1]

Thank you. I have another video for weather API. I have handled units in that video. Thank you for watching ☺️

[@euroclydon7883]

Awesome

[@yashpatel1O1]

Thank you :)

[@vaibhavtyagi619]

finally, i found a guy with tailwind expertise......

[@yashpatel1O1]

THANK YOU

[@mtsmithtube]

I hit the API limit at about 80% way through the tutorial :( Great energy on the presentation and fun tutorial overall.

[@yashpatel1O1]

How?????? Did you run API inside a loop 🤣🤣🤣🤣🤣🤣 Anyways come back later and continue, you will be fine 😀

[@xiaoruizheng7776]

awsome video

[@yashpatel1O1]

Thank you ☺️

[@sulav_4nt]

The best !!

[@yashpatel1O1]

Thank you ☺️

[@shannonbrookshire234]

love the vid

[@yashpatel1O1]

thank you

[@blacksionman]

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?

[@yashpatel1O1]

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.

[@mileicampeonmundial]

i loved the city named spain

[@yashpatel1O1]

Yes! Great country 😊

[@gauravraj8030]

But without s

[@yashpatel1O1]

🤣

[@HeliosBeats]

good video, I made an advanced weather app myself with react-typescript and openweather too. I'm wondering what your vsc theme is?

[@yashpatel1O1]

ayu mirage

[@_caseyjames]

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

[@yashpatel1O1]

timestamp?

[@priyasashi3523]

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.

[@yashpatel1O1]

Thanks for the tip!

[@NandanSingh-mn4zk]

could you tell me which extension you use for auto suggestion for give classname

[@mylesgideonprospero]

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

[@raevengoncalves]

i have done two projects and i think it is way better than bootstrap

[@yashpatel1O1]

I know right!!

[@redokus]

nice video , good energy , Just one thing, you forgot to change the wind speed km/h 😅

[@yashpatel1O1]

Yes, I realized later once I uploaded the video. 🤣

[@charleshays7223]

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?

[@yashpatel1O1]

try using react icons

[@mjdkhankan6234]

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

[@tjoloyede2432]

im having a problem, i need the link for the images you used , is that possible ?

[@paulapeter1846]

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

[@Maria-ji9yy]

Really?? 🥹🥹🥹

[@preciousebere8060]

Same here, bro

[@Maria-ji9yy]

@@preciousebere8060 you can get the free subscription

[@user-vz2nj9qg4h]

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!

[@SerafinBGG]

I'd love to see the project redone with a different API since OpenWeather onecall is now paid. Great video anyway!

[@yashpatel1O1]

Do you know of any Weather API that I can use and is free?

[@adeyemiodusina3826]

Wow, no wonder I was having authentication issues right there.

[@SerafinBGG]

WeatherAPI is good free alternative

[@user-qv2vw6ko8x]

Nice video, thanks. But I don't saw where was getGeolocation function?

[@yashpatel1O1]

Its part of JavaScript API.

[@Marrtn]

When u started to use the API keys, during the test... how did you get it to format like that in google?

[@yashpatel1O1]

I have a brwoser extension called JSON view

[@maxxiemoor6664]

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!

[@yashpatel1O1]

there are 2 source code when you buy it one with openweather api which required credit card second with another free api

[@sarfarazsheikh7378]

For ° celcius symbol in window alt 0176

[@wassupdoc7742]

Awesome video, which theme are you using ?

[@yashpatel1O1]

Thank you 😊. Do you mean theme for VS Code?

[@wassupdoc7742]

@@yashpatel1O1 Yes your vscode theme looks good

[@yashpatel1O1]

My VS Code theme is Ayu Mirage. You can get this theme by installing 'Ayu by teabyii' from extensions.

[@drey9811]

Hello, I followed the tutorial step by step up until 1:31:46 where I constantly get an error "daily if undefined". I checked and compared the code with yours but this error still occurs. Does anyone have any idea what could be wrong and how could I fix that?

[@yashkarwa6229]

Let me know if you found that sol

[@drey9811]

Its not the code, its the fact that API is no longer free. You would have to write your own implementation of different API to fix that.

[@dalestewart]

Option-Shift-8 to get degree icon on a mac

[@muhammadabdullahkiani]

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.

[@yashpatel1O1]

You should br fine with free API

[@deepakumari-yf1tr]

​@@yashpatel1O1how??

[@themindhelp9584]

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?

[@themindhelp9584]

ok my bad:)))))) i forgot to import getWeatherData from weatherServices..all good now

[@abdulrasack4359]

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.

[@yashpatel1O1]

yes but you won't be charged

[@abdulrasack4359]

@@yashpatel1O1 Thanks a million brother

[@Maria-ji9yy]

Did you pay, or how did you resolve this issue

[@akshitbansal2177]

Please help.. Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'slice')

[@akenjinicole1499]

i have the same error

[@yarraraviteja1414]

I think using Axios instead of fetch would be a better option

[@yashpatel1O1]

I agree with you on that. Learned axios after this project.

[@anjumdhalait8565]

I am getting the following error: please can someone help? service.js:46 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'slice')

[@semaytube370]

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?

[@yashpatel1O1]

pricing has changed on API side since I uploaded the video

[@chisomjoshua1197]

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

[@yashpatel1O1]

Yes, you need to subscribe.

[@kanchansharma3486]

@@yashpatel1O1 do i need to pay for this ?

[@deepakumari-yf1tr]

Do you got the solution

[@riteshgoswami7226]

The weather api you are using is free or subscription-based? Because when I am using my key id it is giving 401 'Invalid api key' error.

[@yashpatel1O1]

yes their pricing has changed since I uploaded the video.

[@deepakumari-yf1tr]

​@@yashpatel1O1 do we have any other allternate for it?