My react weather app

Hey all, I was just hoping to get some feedback on my weather application. I plan on refactoring this into an npm-package eventually (I know there will be a million already, but I wanna learn).

Here’s the Demo.
And here’s the github repo.

All feedback is welcome, but I’m especially curious if I’m structuring my react components properly, ie. which components I’m giving state, how readable it is, how I’m structuring the directory etc.

Thanks.

4 Likes

You did really well man , it seems pretty cool.

1 Like

A bug: if I click location symbol and block location request I’ll get a forever spinning spinner and search doesn’t work anymore.

1 Like

it’s working for me did you allow to get the location from your system?

Thanks for letting me know about that! It’s fixed now.

They meant that when the user declined permission, it broke the app. Everything was fine when the user gave permission. It now tells you that Geolocation permission is denied if you decline access to geolocation. You can see by disabling location services on the app by clearing your cookies, or in chrome you can click the lock icon next to the url and block location. Thanks for the feedback, appreciate it :slight_smile:

1 Like

wow … this is so wonderful. Sorry I wasn’t paying so much attention to the weather app itself. i was busy admiring the webpage layout (that is the stage I’m at in my web development journey). very nice job. Very very nice.

Looks great man! The React code looks well laid out. I noticed you set up a server to interact with the OpenWeather API because of your concerns exposing the API key to end users. You don’t actually need to worry - store it as an environment variable (private) in whatever solution you’re hosting on. I’m assuming Glitch actually keeps environment variables or your .env private, but I’m not sure on that.

Personally, I found it helpful to stop using Glitch early on as it does such a wonderful job automating so many things that you’ll find there are many missing pieces of knowledge when you do actually go to deploy something from scratch. A pretty straightforward solution that removes some of the crutch is using a local IDE like VSCode connected to Github connected to AWS Amplify. Amplify will pretty much automate deployment of React apps from a Github repo, and it’s part of AWS’s free tier if you’re new to AWS.

If you’re interested, I did a similar Weather app implementation using OpenWeather and strictly React.

My demo is here: https://weather.jeffbloom.io/

My code is here: https://github.com/bloo0178/weather-client

Let me know if you have any questions - happy to help out.

Edit: Meant to note/ emphasize - you’ll almost always get an API key for any service you connect to. It is standard practice to store these as private environment variables without the need for a separate server with the sole purpose of hiding them. Plus, if you don’t have/ need a server for your software, also makes deployment much more streamlined.

Hey man, thanks for the reply, I’ve been thinking about dropping glitch, I’ll probably try aws or heroku next. Also, I almost stored the API key like you did, but that still isn’t secure, the client is sending the request, which means anyone can see the request (including any api keys you’ve encloded in it) by going to the nextwork tab of chrome and inspecting the request.

1 Like

Oh wow, thanks for pointing that out! I had always assumed that the environment variables would be hidden, but it does seem like that is a known issue (feature?) with React. I’m going to dig into that a bit further to see what other workarounds there are and will post back with findings. It seems excessive to me to have to set up a server for the sole purpose of hiding an API key, but I could definitely be wrong.

Did some more digging. It looks like you are definitely right @M-Michelini. Any secrets need to be hidden outside the React app, since all that code is bundled on build and any network requests originating from the app will contain the info in the headers. So your using the server as a proxy seems to be the recommended workaround. Apologies for the confusion, and thanks for the new knowledge!

No problems! I had the exact same confusion while I was building this.

1 Like

Thanks again for pointing out the flaw with my app. In case you’re interested, here’s the API I’ve since created to handle the proxy and hide the key. It uses the Serverless Framework in conjunction with AWS. Serverless basically allows you to write code as though you were creating any ordinary Express Server, but deploy it in such a way that it takes advantage of AWS’s cloud services - Lambda, API Gateway, etc.

Repo: https://github.com/bloo0178/weather-api

Anyways, thanks again and good luck in your coding journey @M-Michelini!