React JS Tutorial - Build a Weather App With Cities Autocomplete

In this React project tutorial, you will learn to build a weather application using the OpenWeatherMap API and GeoDB API with places autocomplete.
✏️ Slobodan Gajic created this course. Check out his channel: / codewithsloba
💻 Code: github.com/bobangajicsm/react...
💻 OpenWeather API: openweathermap.org/
💻 GeoDB Cities API: rapidapi.com/wirefreethought/...
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:30) How to get API keys
⌨️ (0:02:30) Creating the application and installing packages
⌨️ (0:05:25) Building city search component
⌨️ (0:23:48) Building current weather component
⌨️ (0:43:23) Fetching and mapping data from weather API
⌨️ (1:01:35) Building weather forecast component
⌨️ (1:34:20) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@zdfvbadfbadb]

Small error, but something React developers need to be aware of: Around 1:06:20, in forecast.js, we should use "data.list.slice()" not "data.list.splice()". The difference is that slice() is for copying a portion of an array (data.list in this case) and does not alter the original array. The splice() method is meant for removing part of an array, and replacing it if a 3rd argument is included, so it actually alters the original array, which you don't want to do since altering the props within a React component can lead to unexpected results.

[@ishadowpeople6577]

Thanks for this

[@emmanueleban1096]

correct slice is shadow copy.. just noticed while going through

[@zdfvbadfbadb]

I'm an experienced React developer and enjoyed this tutorial as a refresher on how to interact with REST APIs using React. As with all such tutorials, you'll get the most out of it by going back and experimenting with all the things you can add, modify, expand, etc. Obviously, there is only so much Sloba could include here or the video would be several hours long. In this case, really exploring the API documentation to see what you can get from the API and then how you can use that data is very helpful in learning about working with REST APIs. As I saw from one other commenter, the tutorial does misinterpret what the forecast list array provides. The 40 items in that array are not consecutive daily forecasts, but rather they are consecutive hourly forecasts separated by 3 hours. The API returns 5 days of data and there are 8 3-hr segments in a 24-hr day, hence the count of 5 x 8 = 40. So, to be accurate, you would need to do more data manipulation to really be able to extract a multi-day forecast from this data, and it would only look forward at most 5 days (unless you upgrade to the paid version of the API). But, the point of this tutorial is to show an example of accessing and displaying REST API data, not building an amazing replacement for the current weather app on your phone. One last thing - new devs need to learn about protecting API keys. If you intend to upload this project to a public GitHub repo, then you need to learn about how to do it without exposing your personal API keys. Google "how to hide api key in github" for the how and why of this issue. (e.g., If you look at Sloba's Github repo for this tutorial, you will see he put placeholders in for the keys.)

[@prantikseal]

hey Gfore thanks a lot for suggestion would look forward to doing this. Btw how can I reach out to you would love to connect on socials/ mail!

[@abhyudaysoni]

I noticed the same thing too when I saw the dates were same. And about hiding the API keys, how bad is it for this project, any idea?

[@zdfvbadfbadb]

@@abhyudaysoni - In this case, it is not a big deal since the API key is free so you aren't really trying to protect anything. But, it is just a good practice to protect API keys rather than sharing them publicly since you will eventually be working with keys that definitely need to be kept secret.

[@z4br4k98]

Both react and working with APIs seem like very important skills. Thanks!

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@programamacita]

Awesome video, pretty straightforward, I managed to make this lovely app in no time! Hvala, Slobodane, svaka cast!

[@ShunShufen]

Great little code along project with React. I like how it was quick and simple enough to not get lost and there was some interesting problem solving as well.

[@CodewithSloba]

thank you so much 😊

[@ralfkah3]

Thanks for the great tutorial! My first little coding project with React and i''m sure, more will follow :-) Thanks!!!

[@Missmmmmmmmmmm]

guys i can't thank you enough, you're the best at dropping tutorials out there

[@hazadus]

Great work, thanks! Enjoyed completing this mini project!

[@kdtallllll]

This is so cool! I'm definitely going to mess around with the finished product.

[@ishadowpeople6577]

Just finished! It was awesome!!

[@bhagyashreekhairnar683]

brilliant course. Extremely grateful!!

[@nitrohite]

This was so much fun, thank you!

[@marccallueng3752]

I know tNice tutorials is an old video but I’m new and thank god I finally found you . Thank you for such an amazing and helpful video ❤️

[@canerdemircigm]

I read react documentation and little bit bored but this tutorial made fun my learning journey thanks.

[@HaoNguyen-km9xj]

Nice couse! the api really real, data fetch so cool... and the UI simple but really awesome! Thanks you!

[@CodewithSloba]

You’re welcome, check more tutorials on my channel

[@rohitbagadi3058]

Best video ever for Weather project Thanks alot 🙌

[@kushangayantha9130]

Been waiting for this one.. thank you

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@ricardogonzalezflores1955]

I just finished this project, I loved it. Thank you!!!!

[@CodewithSloba]

Awesome, cheers more tutorials on my channel 👏🏻

[@ameyakharate]

Have you deployed this project

[@Stephinmaju]

Without subscription for rapid api is it work ??

[@pittuprasanth]

Send deployment link

[@Vancha112]

Currently learning react to use with django, thank you for this video :)

[@logic_ok]

same bro. good luck

[@Vancha112]

@@logic_ok I think I got some of reacts basics down , but I found it a little complicated to properly integrate it in to an existing django application. Good luck to you! :)

[@abhiyanupreti417]

Just completed react course from this channel and wanted to do some project🤭🤭 you guys just uploaded a new project thank you!

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@user-gs2zp3dm1v]

did you face any problem like this. Failed to parse source map from 'D:\Project React\July22TutorialWeatherApp\weather-app ode_modules eact-select-async-paginate

[@smirnovsk]

Thank you for your course!

[@alexanderkomanov4151]

Thanks a lot - it was very helpful! Really appreciate!

[@pedromiguelmazzeyvera4872]

Really nice tutorial, just having basic knowledge of react I could understand almost everything he was doing👍👍

[@huydao1588]

how long did you learn react to understand what is he doing, I learn react for 1 month and some of it still got me confused

[@RahulSharma-wh8sq]

Really enjoyed this video Thanks!

[@mrinalmishra3196]

Thankyou Sloba and freeCodeCamp

[@mohsenpasdar8159]

Thank you, it was great!

[@codeek0]

Awesome stuff brother!

[@juanmanuelgarcia6572]

Loved the Video! And also love all freeCodeCamp content!

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@soumyapradhan6537]

Very Helpful and Informative video 🤩🤩

[@shoryapawar2219]

Thankyou I learned a lot It was very beginner friendly though

[@nikhilev3840]

Thank you. I made it as your tutorial

[@MatthewDelongUK]

Just starting this after installing all relevant dependencies/packages. Wish me luck, will update "when" it's completed, looking forward to the challenge and learning 👍

[@CodewithSloba]

Awesome good luck

[@BroskiXP]

Did you finish?

[@siddharthsingh-cw4sd]

any update

[@adityamishra3001]

@@siddharthsingh-cw4sd lol

[@soumyapradhan6537]

Amazing teaching, Keep it bro 😀😀

[@elrickster3076]

Awesome video! Around minute 53:00 I missed the `import { useState } from 'react';` so I was getting the error "useState not defined" but then I caught it, phew. Hope this helps some other 'newbies' like me out there, lol.

[@scaathreykr]

Thank you!

[@snehitlal771]

This is what i needed for my react project ..Thanks fcc

[@CodewithSloba]

Awesome

[@messi_0nly]

Much Love ❤

[@tgrionak4263]

Love video, tnk u very much

[@marcoitalia97]

Thanks mate! 💌

[@sydvys]

This man is not explaining anything he's just telling what to do

[@alexeysmirnov6211]

Thank you so much!

[@andygr1n1]

thanks, very cool api. It is much more interesting to build this using redux toolkit or mst and TS :). But the Idea - is only what we need ))) And what was confusing for me, is styling the select component 🙃, because it has some module.css like generated code in DOM.

[@arturgorbunov3792]

Thank you!

[@sarupk]

THanks a lot! 10/10 for study

[@CodewithSloba]

thank you 🙏

[@marufmarzuq]

Informative 💜

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@matruxas]

Exquisite lesson thank you, while working along had few lols 1. 1:28:42 "Sea_Level in metres" - that would be air pressure at sea level 😂 2. 58:14 Before converting API to &units=metric, you said temperature is in fahrenheit , that was kelvin. 300°F would be ~150°C 😂 Subscibed to your channel :)

[@CodewithSloba]

thank you for letting us know 🙏 awesome

[@skb5739]

I am from mechanical background but lot of interest in coding. Hoping this will help to add to my resume and to gain lot of knowledge.

[@CodewithSloba]

Absolutely

[@gerrell865]

it sort of will but you need to actually complete a big project from start to end. Huge difference than doing tutorials, small projects like these.

[@sajjadjafari7861]

Yooooo that's amazing

[@CodewithSloba]

Awesome

[@saifulrasel6667]

Thank you very much

[@shlomiyahbes4882]

Thank you !! 👑🏆❤💖✨

[@CodewithSloba]

you’re welcome

[@WanKy182]

Foercast request sends you weather forecast for 5 days with data every 3 hours. It sends data for example (from 2022-07-15 12:00:00 to 2022-07-20 09:00:00). You splice data and map over first 7 items(that is day and a half or something like that), but you mark them as day of the week. And not the best idea to use labels instead of spans everywhere)

[@CodewithSloba]

there is a confusion in their api. I tested this data against their day forecast widget and it worked correctly. But you are correct

[@pedromiguelmazzeyvera4872]

@@CodewithSloba Hi! so the original video code is correct and does it reflect the next 7 days? Thank you!

[@Vlada1969]

@@pedromiguelmazzeyvera4872 Seems that original code is not OK... Every object in list array has dt and dt_txt properties which shows date and time for the current forecast and it is clear that those are not daily but three hourly forecasts. This error doesn't make this tutorial invalid as the code is valid it's just that assumption about the data is wrong. Fix can be done by just using some vanilla js to map original data to required format...

[@pedromiguelmazzeyvera4872]

@@Vlada1969 thank you!!

[@user-ku7dh7od7i]

@@pedromiguelmazzeyvera4872 no, it can not be correct. because for this API daily forecast is not free. I think KZbinr just use 3 hour forecast to show how it works in software developpe level

[@mahendranath2504]

Thank you so much 😊🙌🏻👐🏻👏🤝👍👊🏻🤜🏻✌️

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@thimiraakash8941]

Thank you

[@rishiraj2548]

Great thanks

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@juanjosegouvea]

thanks!

[@crack9058]

Please upload some videos on React typescript and some advance projects using React-Redux.

[@amiralirezaei2108]

Awesome

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@brendon5553]

nice i finished it

[@alphareborn9908]

Thank you so much for this Sloba. This video will for sure help with my future coding career. Was this made in Java programming language?

[@CodewithSloba]

You’re welcome, that’s Javascript

[@zdfvbadfbadb]

React is a Javascript library, not Java

[@itexpert4193]

great. gud job

[@CodewithSloba]

thank you

[@tripily5533]

Wow, since when do you have so much subs!

[@CodewithSloba]

Yeah freecodecamp is huge

[@rullyahsani4613]

awesome

[@CodewithSloba]

Thank you 🙏, feel free to check more tutorials on my channel

[@mohammadsamiur4916]

Love you from Bangladesh

[@CodewithSloba]

Love from Serbia

[@nnamdiezeh4159]

Great tutorial. I am having an issue tho. the current weather component is not showing just the search component. I have checked with your code on git hub but i still cant figure where the issue is. Note: the weather component was showing before i linked the api

[@mohammedmaresh9963]

start watching... enjoy

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@user-te2pe5qm8o]

Thanks! I almost finished this, but the forecast info is 4 hours interval, and I prefer to make something different from this tutorial, thanks anyway.

[@Dev-Phantom]

cool

[@eddiemetriumzone3583]

Question guys (not stack overflow) Is the weather api in the free plan limited by days because I saw it says 5 days 3 hours a day weather updates with geo location?

[@tripily5533]

Pogchamp

[@nickst2797]

I want to learn React, but all the tutorials are long as hell! This seems decent. Is this good enough for a beginner to learn React?

[@CodewithSloba]

This will help for sure, but only one tutorial can’t teach you

[@jonathantribble7013]

Just code and code! If you don’t understand a part, that’s ok. You’ll understand it in the next tutorial that you do.

[@DrGuanto]

React is like the hell, that's why tutorials are that long! 😂

[@nwaguchima2280]

I personally don't even take short tutorials, except of course It is focused on a tech I really want to learn. Only long tutorials can really give you so many implementations. If you are looking to earn so much from this career, I think it's only natural to be willing to give so much.

[@CodewithSloba]

I agree what you say, just make sure to take time to digest informations

[@despacitodaniel801]

crazy how this was just 9 months ago and it's already kinda outdated

[@d3dr]

The slice(0, 7) data from list shows not daily forecast but hourly! So you get forecast just for 1 day not for a whole week!

[@dohkopaul5166]

geocities api was change so what do you did to use api from geocities ? axios?

[@kekoHere0610]

This tutorial did not work for me. Too many errors keep popping up. The search bar is not working right. THe dropdown keeps switching up between no option and loading.

[@kazisohail6798]

api has changed not working now

[@dfordemo981]

ammmmazzzzingggggg !!!!!

[@CodewithSloba]

thank you 🙏

[@enchantress2100]

What is the best way to study with these videos for actual learning? I know they are an amazing skill, but there is a subtle line between learning and just following commands. I’m asking to the ones that are improving their skills at the moment. 🥺 how do you do it? Some advice would be appreciated Thanks!

[@Mahmoud_176]

Did you find the answer?

[@enchantress2100]

@@Mahmoud_176 nope

[@yusufabdullahi2874]

Nice project, I really love the explanations💥💥 I have a little bug I want to fix: anytime I search for a city, it's keeps on fetching data (weather and forecast) how do make it fetch once and hence the input search?

[@user-kw8qh4bc6p]

hey did you found the bug I am also facing same issue

[@yusufabdullahi2874]

@user-kw8qh4bc6p you are probably updating a state in the search component. that's why the component keeps re-rendering and keeps fetching data for the input. Let me know if this info helps

[@marisaksaunders]

i'm having this same issue and I really can't figure it out, I even copied his source code from the search.js file and its still happening

[@user-gs2zp3dm1v]

Failed to parse source map from 'D:\Project React\weather-app ode_modules eact-select-async-paginate ode_modules eact-is-mounted-hook How can i resolve this error.

[@kathhill1]

I'm getting the same error.

[@PiyaliMukherjee-be2ir]

can you please tell whether there is any way to fix the issue that both max and min temparature is same

[@anantlaghane4733]

sir. which use in project backend and frent end i am comfujen .

[@reyhanesafari4367]

good

[@CodewithSloba]

thank you 🙏

[@revulation1971]

how did you defined axios it wasn't in geo api before

[@gurbanoglu5143]

Please execute the following commands to avoid the error at 1:09:15: npm i accordion npm i react-accessible-accordion

[@prathikchandrahegde3735]

didn't get it how r u getting the options tab when in the start

[@mcdthedev]

i am getting this error (city : "Belgrade, RS" cod : "404" message : "Internal error" [[Prototype]] : Object ) which suggest i am not receiving data how can i resolve this problem ?

[@Culurgione]

Thanks for putting this together. I am one hour in but the entire app has gone blank. Not sure why

[@CodewithSloba]

check the console

[@vaporycoder]

why not use axios instead of fetch?

[@TheMrTadeotadeo]

Hello! I am going along with the tutorial, but by the 12 minute mark the search bar still hasn't appeared on app? The console is not sending me any errors. Do you know what could be the issue?

[@ibeliveinawp]

Had the same issue, didn't install react-select-async-paginate correctly. Use this command "npm i react-select-async-paginate --force --save"

[@TheMrTadeotadeo]

@@ibeliveinawp thanks I'll check that out

[@abbas.hussain23]

Hey, I'm not able to load data for different cities. My code is only fetching or showing the data of a particular country irrespective of any city name typed...

[@muhammedsamedozdemir7863]

One way to fix this is by appending a unique identifier, such as a timestamp, to the API endpoint URL. This ensures that each API request is unique and not cached. const loadOptions = (inputValue) => { const timestamp = Date.now(); // Unique identifier const url = `${GEO_API_URL}/cities?minPopulation=1000000&namePrefix=${inputValue}&timestamp=${timestamp}`; return fetch(url, geoApiOptions) .then(response => response.json()) .then(response => { return { options: response.data.map((city) => { return { value: `${city.latitude} ${city.longitude}`, label: `${city.name}, ${city.contryCode}`, }; }), }; }) .catch(err => console.error(err)); };

[@birsingh5388]

Please create the same project with VueJs as well

[@CodewithSloba]

good idea

[@_santhosh16]

Constantly throws module not found cant resolve error for current weather.js

[@JBurky15]

Tried to follow along with this to get some extra react practice in and it just will not work for me. Once I completed the search component I keep getting an error where it flicks between searching and no options over and over until I click off the search bar. I even downloaded your code and it was doing the same thing to me, no clue why this would happen. Thanks for the tutorial anyway.

[@biancamagali100]

hey I have the same problem :( did you fix it?

[@cheshtaarora5499]

@@biancamagali100 i m facing the same issue how to fix it ?

[@ChamiLusi]

same! and my widget dissapeared too

[@pranjalkumar9871]

when I input the prop {data.city}, it shows an error that data is null, please help!

[@sampatjana]

Hello sir plz tell me asking questions for reactjs project of weather

[@suaybkardas948]

Even though I am a member of the geoDB site and use my own "apikey", I get a 403 (forbidden) error when fetching data from geoDB. I also tried with fetch and axios. Do you know how can i fix that problem?

[@adamzdan-michajlowicz2528]

Hello, I had this same issue. Its because we are supposed to click a button on the page with the copy and paste code that says "Subscribe to Test". 403 means we are authenticated (aka logged in) but havent yet got the rights to that particular API (ie havent subscibed). I hope this helps

[@PrincessOfIlluminati]

Whenever I type something to the search bar I keep getting this error "You have exceeded the rate limit per second for your plan, BASIC, by the API provider" any idea how to solve this? I tried to type slower or refresh the page but didn't work.

[@CodewithSloba]

You need to add a delay, as you are making too many requests

[@oscarhzambranobenjumea7764]

In the minute 18:21 I have a error, the console show me the next msg {message: "You are not subscribed to this API."} message: "You are not subscribed to this API." I scan the code and I'm register this websities, but I don't know what happend, thanks for your help.

[@TheEmanuelOno]

you actually have to subscribe. Go to the website and click subscribe to test. It should direct you the plans they have. Then click the basic one.

[@oscarhzambranobenjumea7764]

@@TheEmanuelOno thank you so much

[@abdulwaarithzakariyya43]

@@TheEmanuelOno Thanks a lot for this.......

[@nathaliabavutti526]

I had the same, as I was only signed up, but as soon as I chose a subscription option it started working for me! the answers are very helpful! thnx !

[@MrKukuri44]

You are not displaying Daily forecast you displaying hourly forecast in week days and it is incorrect

[@KvnIsLit]

where can i download the icon folder?

[@rishiraj2548]

Good day greetings

[@CodewithSloba]

Awesome thank you, check more tutorials on my channel

[@rishiraj2548]

@@CodewithSloba , 👍

[@JoyMazumder672]

forecast.js isn't returning. splice method error. anyone please help me? 1:06:27