Weed Warriors

Frontend for a reporting system where users collaboratively map instances of local invasive plant species.

Prerequisites

1. Node & npm - This project requires NodeJS and NPM. To make sure you have them available on your machine, try running the following command.

$ npm -v "&&" node -v
9.6.4
v20.1.0

2. Google Cloud Storage - Follow the steps in this article to create a Google Cloud Storage account for uploading images: Image Upload With Google Cloud Storage and Node.js
3. Postgres database - Download a database administration platform for Postgres like pgAdmin and create an empty database, then run the creation script to instantiate tables. Import catalog and severity data into respective tables.
4. Create a .env file with the following variables (see Sequelize documentation on connecting to a database):

PG_URI='postgres://USERNAME:PASSWORD@HOST:PORT/DATABASE'
PROJECT_ID=Google Cloud project ID
STORAGE_BUCKET=Google Cloud bucket name
STORAGE_KEY=Path to Google Cloud .json service account key (ideally with key in the name for gitignore)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installation

Start with cloning this repo on your local machine:

$ git clone https://github.com/nurulhaya/weedwarriors.git
$ cd weedwarriors

To install and set up the library, run:

$ npm install

Serving the app

$ npm start

API

See: HTTP primer for frontend developers and primer on JavaScript fetch() method

Catalog

• GET /api/catalog - Retrieve all data catalog entries in the database.

Media

• GET /api/media - Retrieve all media entries in the database.
• POST /api/media - Create a new media entry, example:

Example

await fetch("/api/media", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    url: "https://site.com/example.png",
  }),
})
  .then((res) => res.json())
  .then((json) => console.log(json));

Reports

• GET /api/reports - Retrieve all report entries in the database.
• POST /api/reports - Create a new report entry. Example:

Example

await fetch("/api/reports", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    catalog_id: 1,
    latitude: "31.007027",
    longitude: "-73.922880",
    severity: "10%",
    media_id: 1,
    comments: "N/A",
    user_id: 1,
  }),
})
  .then((res) => res.json())
  .then((json) => console.log(json));

Severity

• GET /api/severity - Retrieve all severity category entries in the database.

Tickets

• GET /api/tickets - Retrieve all ticket entries in the database.
• POST /api/tickets - Create a new ticket entry.

Example

await fetch("/api/tickets", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: 'New ticket',
    description: 'Ticket description',
    priority: 'High',
    status: "Not started",
    report_id: 1,
  }),
})
  .then((res) => res.json())
  .then((json) => console.log(json));

Users

• GET /api/users - Retrieve all user entries in the database.
• POST /api/users - Create a new user entry.

Example

await fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    first_name: "First",
    last_name: "Last",
    email: "[email protected]",
  }),
})
  .then((res) => res.json())
  .then((json) => console.log(json));

Hosting options

Both the database and live web application can be hosted for free on Render (see Configuring Environment Variables and Secrets).