DEV Community

Cover image for MonarchMap: Help save the Monarch butterfly with New Relic πŸ¦‹
Emma Goto πŸ™
Emma Goto πŸ™

Posted on

MonarchMap: Help save the Monarch butterfly with New Relic πŸ¦‹

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.

Photo of a Monarch butterfly

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.

Report a butterfly sighting with MonarchMap

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

Form to submit Monarch butterfly sighting

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

A map of Monarch butterfly sighitngs

MonarchMap is built using a number of technologies:

  • Blitz.js
  • Tailwind CSS
  • MapBox
  • New Relic

You can check out the full code on my Github

How does MonarchMap use New Relic?

New Relic is a platform that lets you monitor and analyse the performance of your site. I made use of four separate features/APIs that New Relic provides when creating this app.

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:

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!

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:

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.


I enjoy participating in DEV hackathons, and this one was no exception! I got to spend a bit of time exploring some cool tech, and I actually learned a lot about the Monarch butterfly in the process as well.

The official submission for this hackathon is viewable over at therelicans.com.

Top comments (2)

Collapse
 
alexlsalt profile image
Alex Morton

Always love your projects, Emma!!! Great work!

Collapse
 
emma profile image
Emma Goto πŸ™

Thanks Alex!!