MonarchMap: Help save the Monarch butterfly with New Relic 🦋
Tags: showdev, hacktheplanet, newrelic
Published: 2021-02-24 11:33:08

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](https://www.nationalgeographic.com/animals/article/monarch-butterflies-risk-extinction-climate-change).

![Photo of a Monarch butterfly](https://images.unsplash.com/photo-1567434155064-d9ac98d318e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80)

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](https://dev.to/devteam/announcing-the-new-relic-hack-the-planet-contest-on-dev-5d), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro6uw01vjlepeigz9owj.png)

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

![A map of Monarch butterfly sighitngs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1xfricd3e6whkz1kj9c.png)

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](https://github.com/emgoto/monarch-map/)

## 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](https://docs.newrelic.com/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent#copy-paste-app) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imb5dejc802rjo35s32b.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn6qwa7nu2paqaw53igu.png)
 

### 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](https://docs.newrelic.com/docs/telemetry-data-platform/ingest-manage-data/ingest-apis/introduction-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uyiq8fxt8cqywmklamv.png)

  
### New Relic NerdGraph

New Relic has a GraphQL API called [NerdGraph](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph). You can use their handy API explorer to craft your GraphQL query:


![Screen Shot 2021-02-18 at 9.46.02 pm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmvjro2l4czw3khyjo2q.png)


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](https://www.therelicans.com/emma/monarchmap-help-save-the-monarch-butterfly-with-new-relic-284f).