The Relicans

loading...
Cover image for MonarchMap: Help save the Monarch butterfly with New Relic

MonarchMap: Help save the Monarch butterfly with New Relic

emma profile image Emma Goto 4 min read

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

Alt Text
Alt Text

Description

MonarchMap lets you report Monarch butterfly sightings by filling out a form:

View GIF

You can then view these sightings, day-by-day, on a map to track their migration over time:

View GIF

Link to Source Code

monarch-map on Github

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 apps performance, such as page load times:

Screen Shot 2021-02-18 at 9.34.16 pm

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:

Screen Shot 2021-02-18 at 9.34.47 pm

Out of this world!

Im entering MonarchMap under the hackathons 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 apps database.

This isnt technically what youre 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:

Screen Shot 2021-02-18 at 9.28.18 pm

New Relic NerdGraph

New Relic has a GraphQL API called NerdGraph. You can use their handy API explorer to craft your GraphQL query:

Screen Shot 2021-02-18 at 9.46.02 pm

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, heres 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)

pic
Editor guide