The Relicans

Cover image for Let's Make Our Planet Cool Again With Plant More
rino
rino

Posted on • Updated on

Let's Make Our Planet Cool Again With Plant More

What I built

I make an application that you can use to see the data about forest area of a country, air quality of a country, also some of the plants that you can plant on your garden or your yards. I also create a new relic application known as nerdlet, to monitor some of the action that user make on my application.

Category Submission:

New Year, New Resources

App Link

https://plant-more.vercel.app/

Nerdlet Application to Monitor My Application

Screenshots

Alt Text

Alt Text

Alt Text

Description

Using this application you can see the forest data of a country, see the air quality in your country, and see some of the plants that you can plant on your backyard, i also add some donation list, so if you had some money to spare, but don't have time to plant some plants, don't worry there is some organization out there that can help you out.

Link to Source Code

The application frontend

GitHub logo spiritbro1 / plant-more

this repository is used to plant more plant to prevent global warming and greenhouse gas emission

The application that i create to monitor my frontend application using new relic nerdlet

GitHub logo spiritbro1 / plant-more-dashboard

plant more new relic dashboard

Permissive License

MIT License

Background

Today our world has facing some serious issues, which is global warming, with this app i want to add awareness to people about this massive loss of our forest that contribute to the heat wave, water drought, bad air quality and so on. So with this app i want to make sure people can get the data of the forest lost year by year, air quality in their area, some of the plants that they can plant in their country or area, also some donation list so they can donate to some of organization that contribute to the reforestation of our forest.

How I built it

Screencast

There are two part of my application, which is frontend, that i create using next.js, and new relic nerdlet dashboard, which i create using new relic cli, i'm gonna break down section by section here :

Frontend Part

So for the frontend i'm using nextjs to create my application, and tailwind to create the design of the app, i also deploy my application using vercel. Now i'm gonna break down what is my app doing :

Alt Text

So this is the first section of my frontend application, i create this, so that user can navigate the site easily, i also create some description of what this site is all about, which is to create an awareness of global warming, and i want to show you the data of the forest loss and gain through the years of some country.

Alt Text

In here you can see some of the forest data year by year starting from 1990 and ends in 2020, you can choose between those number to see the percentage loss or percentage gain of a forest per year, i get the data of this in a csv which you can download also here in my repo or if you want the complete data you can see here

Alt Text

You can click the download button there and you're good to go.

Alt Text

Alt Text

The second section is air quality section as you can see above, you can see the air quality of your country, see the pollutants, and see the health recommendations, i get all the data of air quality from this api called breezometer , there you can use their data by giving your coordinate, to get the air quality in your area.

Alt Text

As you can see here you can see some of the plants that you can plant, based on the area that you search.

Alt Text

And if you click learn more you will get some of the data of the plants, like the year, the growth habit, observation, is it edible or no, and rank of that plants, you can get all the data here

Alt Text

And here is the list of some of organization that you can donate to, like mr beast team tress, and tree nation and etc., i get this from various resource, of course i google some of this, and this section maybe a subject of a change in the future, i didn't research more of this actually, so please be careful when you donate also, the only one i know just team tress basically. So i also create a form there so you can send me some info of maybe some of your organization so i can check thoroughly and if it's good i will put it there also.

Alt Text

You can see the source code of this application by clicking Learn More button there.

Alt Text

Last but not least you can send me some message, which if i got time i will reply to you if you provide me some email.

New relic nerdlet application

So as you can see here i create a nerdlet application dashboard to send an event to new relic, to then get the statistic of my nextjs application, i'm gonna breakdown what data that i send, and how it help me monitor my data that being sent from my frontend app to my new relic app.

Alt Text

This is what my new relic application looks like i'm gonna break it down one by one :

Alt Text

So at the top left corner i create a Contact Form table chart. So what is that? so basically what i'm trying to create here is an event, that catch all of the message that user send to me, so all the message that you sent from the contact form on my nextjs application it will go here, so i can read it and maybe if there is some email, i can reply to it.

Alt Text

Here is the form that related to that table chart, so if you click send, it will go there. The event that i send basically using Event API of new relic one, you can learn about that here and this is the snippet of my code that send to the event api :

import fetch, { Headers } from "node-fetch";

export default async (req, res) => {
  try{
    let headers = new Headers();
    headers.append("Content-Type", "application/json");
    headers.append("X-Insert-Key", process.env.KEY);
    const response = await fetch(process.env.ENDPOINT, {
      method: "POST",
      headers: headers,
      body: JSON.stringify(req.body),
    });
    const json = await response.json();
    res.status(200).json(json);
  }catch(e){
    res.status(200).json({success:false});
  }

};
Enter fullscreen mode Exit fullscreen mode

So for the KEY and ENDPOINT environment variable you can get that from here , and for the req.body i just send it just like the example and modify it a little bit so it can be used by me to create my apps that i want:

[{eventType:"Contact",email:"tree@tree.com",name:"trees",message:"Plant mo trees lets gooo"}]
Enter fullscreen mode Exit fullscreen mode

It will then create an event named Contact that we can query using NRQL like this :

SELECT timestamp,email,name,message FROM Contact
Enter fullscreen mode Exit fullscreen mode

Then voila we get our data from event api. Basically all of my data that i shown on my dashboard is using Event API , but i'm just gonna break it down to you guys so you can understand what my application doing here. And to put that in our nerdpack layout you should see the index.js , it basically using nerdpack layout, so it pretty easy to create.

...
const since = timeRangeToNrql(PlatformState);
const contactEvent = `SELECT timestamp,email,name,message FROM Contact `;
...
 <TableChart
      fullWidth
      accountId={this.accountId}
     query={contactEvent + since}
   />
...
Enter fullscreen mode Exit fullscreen mode

so if you see line 63 in my index.js there which is the backbone of my new relic application, i put the contactEvent which is the NRQL to get the data from new relic, then the since is basically coming from PlatformState that you get from the timepicker on the top right corner so it will say like since 30 minutes ago or whatever based on the platform state you can see the full explanation here

Alt Text

So the Donate Recommendations is basically that i said earlier in the article which is an event sent from the donate form.

Alt Text

Here if you click send, it will go right into donate recommendations table that i can reconsider to be put in donation list. To make is the same as before i just send the event data into the new relic Event API

Alt Text

This Successful Request table chart basically to inform me about all of the successful request user makes for example when you search plant if it showed data it will send the path of the API there and the form where the data come from.

Alt Text

If you search here and it is not throwing any error, it will send an event data to that table

Alt Text

The Error Request table basically just a table which gather all of the error as you can see at above image there is some error there, in the corresponding API

Alt Text

For this pie chart basically i get the data from forest data, so everytime somebody click search in forest data form, it basically send event data also to the new relic.

Alt Text

So if you click on search in the search plant form, it will definitely show the data to that pie chart, and answer my question what is the most searched country forest.

Alt Text

This pie chart basically come from the Learn more button of a plant search, so basically if you click Learn more and it showed plant detail, it will send event to new relic.

Alt Text

if you click Learn More it will send event data to new relic.

Alt Text

This one is come from check air quality API so basically everytime you click Check Now it will send data there

Alt Text

If you click on Check Now it will send data to new relic.

Alt Text

Basically here we get the data of country or area of a plants user search the most

Alt Text

If you click on here you will get the data of every area that your user search.

Plant event

I added plant event, so you can add event in your local area, and added a donation button where people can donate to that event, if they couldn't go

Alt Text

This is the map where you can add event data like name, date, location, and event detail

Alt Text

This is the list of the event added, there is two button which is location and donate, the location is to check the location on the map, and donation is for donating with your name, for now i doesn't added payment method or anything because of the time, but in the future i have a plan to add token like payment so every time people donate they will get unique token straight from the blockchain.

Alt Text

This is the plant event statistic, i get all the statistic here straight from the new relic event api, using nerdgraph i can get all of the data with ease.

import fetch, { Headers } from "node-fetch";

export default async (req, res) => {
  try {
    let headers = new Headers();
    headers.append("Content-Type", "application/json");
    headers.append("Api-Key", process.env.USER_KEY);
    const response = await fetch("https://api.newrelic.com/graphql", {
      method: "POST",
      headers: headers,
      body: JSON.stringify({ query: req.body }),
    });
    const json = await response.json();
    res
      .status(200)
      .json(json?.data ? json.data.actor.account.nrql.results : json);
  } catch (e) {
    res.status(200).json({ success: false });
  }
};

Enter fullscreen mode Exit fullscreen mode

This is some of the code that i use to get the data using nerdgraph.

{
      actor {
        account(id: ${accountId}) {
          nrql(query: "SELECT count(*) FROM DonateEvent SINCE 24 HOUR AGO") {
            results
          }
        }
      }
    }
Enter fullscreen mode Exit fullscreen mode

And this is an example of how to get data of how many trees has been planted since 24 hours ago, using nerdgraph, as you can see i get the data from DonateEvent, and counting how many item are there in the DonateEvent event since 24 hours ago, thats how i get how much tree planted.

So that pretty much it, i hope you like my application. Thank you so much for reading this. I hope with this application, we can destroy the climate change very soon. ciao!!

Additional Resources/Info

Discussion (0)