Hack The Weather is an app that uses historical weather data to show today's average temperature in a city as well as what was the temperature on the same day 1, 2, 3, 4 and (almost) 5 decades ago (that's as far as the API's historical data goes).
New Year, new resources
It's interesting to look at the results, not only for average temperature (big number), but also for the difference that can be found in min and max temperatures, giving more context of what the weather felt like each day.
I originally created this app last year as a way to compare today's weather with yesterday's. Hardly any weather applications lets users look at the weather conditions for days before. It's often all about the forecast of upcoming days. The idea was that by comparing today's weather with what it was like the day before, it would be more meaningful to users than just an abstract number for the temperature.
Iterating on that, me and my friend and colleague Alba were curious about what would happen if we used the vast amount of available data on historical weather to query for temperature on the same day throughout the years and decades. And we were surprised to see that even in such a small-scaled sample it's often easy to notice the rate at which temperatures have increased for any given day.
We think it can be a valuable resource to give people visibility on this very serious problem we're facing as Humankind. Rather than showing hard, distant scientific data, offering something people can directly relate to and experience on their own, but supported by scientific facts.
The color coding for the whole site is based on temperatures: the opacity and color of each day's card, and the theme for the charts. To make it easier to see the temperature's evolution, Alba added 2 charts using Chart.js on React. One is a bar chart to see the temperature on each day, and also a line chart showing the evolution of the gap between min and max temperatures.
Finally, we added the functionality to share a link to an specific location, using the URL's query params, and in order to use this sharing feature as much as possible, the option to share the link in a tweet or a Telegram message.
This is a small proof of concept but I think its main strength is that is deals with data people often consult and use, rather than big-scale scientific data that might mean little to most people. I would like to expand it to other daily weather information people use (humidity, wind, precipitation) to give a more complete comparison of all of one day's weather, not just the temperature.
We used VisualCrossing Weather API, a freemium weather API (prices are super cheap after a basic daily request limit) with tons of historical data. It was incredibly helpful in solving things for us: location resolution that just works, easy to navigate docs, a query builder, and even support for custom time periods (like yesterday, today, etc.) in requests, instead of accepting just date formats.
The app is comprised of a frontend built with react and a backend built with node+typescript, mainly used to mask the requests to the API (and the API key that goes with it) and resolve some logic so that the data requested by the client is more light weight, thus optimizing performance.
I used Netlify to host the front end, through its integration with GitHub. This way site deploys every time a given branch is pushed, making iteration super easy. The backend is hosted in Heroku, with a similar mechanism.
Adding New Relic to FE and BE was surprisingly easy. Just dropping a file in the project (and adding a dependency, in the case of node) was enough to get the first results instantly and start playing around to see what information could be more valuable for monitoring the app.
What features of New Relic did you utilize when creating this project?
We used the New Relic Node.js agent to monitor activity both in the backend and in the frontend: which locations people search, where they're accessing the site from and specially for this app, monitoring the usage of the free API and get alerts if it goes over the daily limit.
The Weather API returns the cost of each request on the response payload, I have added a custom metric called
WeatherQuery/Cost where I increment this metric for each of the queries. That way I can configure an alert to know when the cost of the API is about to go over the daily free limit.
Frontend: React on Netlify
Backend: NodeJS + Typescript on Heroku
I added some resources at the bottom of the page to help people understand what the see and give a broader context. Example: temperatures may seem more extreme in the cold, sub-zero area and it's important to help people understand that that sort of thing does not refute global warming, as it's easily explained by scientists observations.
Here's some of them:
These are our DEV.to profiles, if you wanna follow updated to what we add to the site in the future: