As well as my official submission for the New Relic hackathon, I have also written an accompanying post over on DEV.to that I would encourage you to check out!
What I built
MonarchMap lets users submit butterfly sightings and visualise them on a map. The app was built using a number of technologies:
- Blitz.js
- Tailwind CSS
- MapBox
- New Relic
Category Submission:
"Out of this World"
App Link
https://monarch-map.vercel.app/
Screenshots
Description
MonarchMap lets you report Monarch butterfly sightings by filling out a form:
You can then view these sightings, day-by-day, on a map to track their migration over time:
Link to Source Code
Permissive License
MIT
Background
Each year, Monarch butterflies make a 3000-mile migration across North America. But climate change is impacting their migration patterns and their breeding grounds.
As a result, these beautiful insects are now threatened with extinction.
Gathering data on the location and migration patterns of these butterflies is an important step towards keeping them from going extinct. For the New Relic hackathon, I've built a tool to track these butterflies.
How I built it
I made use of four separate features/APIs that New Relic provides when creating this app:
- Browser monitoring agent
- Alerts
- Event API
- NerdGraph
New Relic Browser monitoring agent
By copy-pasting a JavaScript snippet into my app, I can view a New Relic dashboard that shows the app’s performance, such as page load times:
New Relic Alerts
New Relic also lets you set up alerting rules. In my case, I set up a rule for site performance. In the case where page load times become slow, I will receive an alert to my email:
Out of this world!
I’m entering MonarchMap under the hackathon’s “Out of this world” category. So when I was coming up with my idea, I tried to think - how could I use New Relic in an innovative way?
The solution I settled on was to use New Relic as my app’s database.
This isn’t technically what you’re supposed to use New Relic for, but I figured, if I could do it, why not?
New Relic Event API
New Relic has an Event API you can use to send custom events. When a user reports a butterfly sighting, this is registered as an event in New Relic. You can then make dashboards to view this data in New Relic:
New Relic NerdGraph
New Relic has a GraphQL API called NerdGraph. You can use their handy API explorer to craft your GraphQL query:
I made use of it to grab a list of all of my custom events. This is what powers the sightings map! This means that my app is fully functional without its own database - all thanks to New Relic.
In the process of building my “Out of this World” app, here’s what I learned about observability and technology in the fight against climate change
Observability tools play a vital role in the protection of our planet. In the case of the Monarch butterfly, the more data that can be gathered and observed will increase their chances of surviving their otherwise inevitable extinction.
From building this app, I learned about the significant time and effort volunteer groups have put in over the last 20+ years to manually count and observe these butterflies.
By using observability tools like New Relic, we can help to improve the speed at which we can respond to finding and protecting their nesting habitats, and enable larger numbers of volunteers to easily contribute their help to scientists via an app like MonarchMap.
Discussion (0)