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