Code Feedback for weather application built using react

Hi!

I am finally done with the weather application project that I had been working on. I built this project for independant learning . It uses technologies like react, react hooks, GeoDB cities API for fetching the cities, countries and other geographical location data, Open weather map API that fetches current weather and forecasts acquired through various resources like meteorological data stations, etc. It also consists of a search bar with autocomplete of cities. I did take reference from the freeCodeCamp projects.
Let me know your feedback. It would both orient and encourage me.
Link β†’ GitHub - ananya-singh-afk/ReactWeatherApplication: This weather application is build using React, OpenWeatherMap API and GeoDB API with places autocomplete.

Hi there and welcome!

Where is the live link to the website

Don’t commit your API keys. Revoke them so they are not misused.

You need a backend for the API interaction if they require keys, or use public APIs that do not require keys. The easiest access to a backend (and hosting) would be to switch to a React meta framework like Next or Remix.

1 Like

Hi,

I am sorry about that. I just deployed my application on github pages.
Here is the link β†’ React App

1 Like

sure thanks.
here is the live link

Hello and welcome!

A useful component would be a text welcoming the users to the page, inviting them to utilize the search bar above.

The less a design makes the user think, the better!

1 Like

Just to be clear, committing the API keys is only part of the problem. Your client code is leaking the keys. If you open the browser dev tools, you can see the keys used by the client. That is why I said you need a backend for this.

I realize this is just a practice app and is only using free APIs, but it is important to understand how API keys work with client code.


As for the app. It looks nice, but I would suggest limiting the max width.

I think you have a pretty high limit on the population for the cities you can search for. I would allow smaller cities to be searched for.

Also, most weather apps use the geolocation of the device to give the weather of the current location. I would look into using that as well.

1 Like

Sure! thanks for the feedback.

I understand. What method would you suggest for encrypting the API keys for security purposes?

Will work on the max-width and population properties.
Thanks for the geolocation API, I was recently reading about the same. Will surely try to implement this.

You need a backend. Your client can not directly use the APIs because the keys are plain text strings (in headers or query strings).

Your client will fetch from your backend, and the backend will fetch from the APIs for the client and send back the JSON.

1 Like

got it. Thank you so much!