My thoughts on the Weather App front end challenge

Code Feedback
1

Greetings all, I hope the day finds you well.

I’ve just completed the Weather App challenge; you can find my solution here: https://codepen.io/cugamer/full/vyvmRO/. I have just a couple of things to say about my approach, and the problem in general.

First off, it should be emphasized that in the really real world, putting an API key into a front end application is a really, really bad idea. If you put it out there in the world others can take it and use it for anything they like, and you might not like what they are doing. For a project like this the risk is minimal, but in a production environment the key should be safely tucked away on the back end, stored in an environment variable and NEVER put into your source code. When learning about things like API keys security should be discussed.

In my solution I get around this by simply not including the API key, and instead prompting the user to enter their own. This is safe as I’m not exposing anything tied to me, and the user’s privacy is protected as well (since it lives in their browser and is cleared when the page is exited.) This made the challenge more difficult, but that’s the point of these things.

Secondly, I’d like to discuss the API choice. The challenge recommends using the Open Weather Map API but I had difficulties with this. I do my coding on my machine using Sublime Text and Chrome (working in CodePen directly is just a hassle in my world) and I was able to get Open Weather Map working just fine there. Putting it into CodePen for deployment however lead to an issue. CodePen uses HTTPS but Open Weather Map doesn’t expose an HTTPS endpoint unless you are a paid user (which I’m not doing for an exercise.) This caused conflicts as mixing HTTP and HTTPS is shut down by a lot of browsers, part of the push to getting everything onto HTTPS (which is a good thing.) So after some searching, I switched to the Weather Underground API which I recommend others do, and also recommend the FCC people update the challenge to this as well. Not only does it have a working HTTPS endpoint, but it also provides other features like built in weather icon image urls. It makes things much simpler, I would have saved several hours if I had started with it.

So those are a couple of thoughts, would like to hear yours as well, both on my solution and the concerns I raise here. Be well, and happy coding.

3 Likes
2

Thanks a lot for sharing this.

I too had this experience using CodePen:
http - no geolocation data.
https - geolocation data, but no response from OpenWeatherMap.

I banged my head against the wall for about an hour trying to debug what I thought was my ajax request before I decided to peak into my browser’s console. Sure enough, a “requested insecure endpoint” error.

Although I’m choosing to see this as a memorable learning experience, I think FreeCodeCamp should update their API recommendation in this exercise to avoid this kind of confusion for new learners.