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.

Report a butterfly sighting with MonarchMap

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:

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:

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.

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.