Step 3 - users

Weekly github commits, the peak bar is 10 for the week of Mar 7.

Weekly github commits, the peak bar is 10 for the week of Mar 7.

So I added users to the site! What a crazy amount of work this has become. Between “simple” routing and posting, funneling photo data around via forms, converting my pug syntax into react modules, executing client side vs. server side functions.. I’m getting quite lost.

As you can see my github commits have definitely slowed down since the beginning of March as my site has grown in complexity. But I think I am very close to an MVP.

Right now I have users added to the site, along with a few forms for them to add their projects and waste to the site. These have accompanying photos that are stored in Amazon S3, while the metadata is stored in MongoDB.

While I don’t have unique endpoints for these postings yet - as in chaffmap.com/projects/99101929 I am close to understanding how to do so. AS SOON as I have these unique endpoints added, I plan to go door to door in my local area, as well as send many many e-mails to interested parties, and seek out specific businesses I know that have repetitive waste - such as my old place of work, coffee roasters, and grocery stores.

Check out the general pages below - Projects and Waste (waste still says projects at the top), and a profile page (of me lol).

This is showcasing just some projects I’ve executed, and some by a friend of mine bc I know of his process converting skateboards to awesome art tools. I also post some waste items I know are produced regularly. This is what I showcased in the quick and dirty, and the feedback I got was ‘keep going!’ ‘this is super necessary!’ ‘I’d totally use it!’ So that was quite inspiring to hear and necessary for these last few weeks of grinding it out.

To be honest I’m not quite sure how far I can get before I need to turn something in, so I may seek funding for this project in order to keep it moving at a good clip rather than the pace of a typical side-project. That being said, that would then involve a lot of moving pieces beside myself… so I’ll cross that bridge later.


Thesis Step 2

I found - with some help from Genevieve Hoffman - that the simplest API call for my Chaff Map needs was through a Yelp node service. Being that node is a server side language, and my app is a web interface, I needed a way to connect the two - specifically in real time related for user calls. So, I realized I needed to finally begin server side programming, even though I have very little experience. But that’s to me what this thesis project is about.

So I spent all weekend working through an Express tutorial. Finally getting to a point where a user can fill out a simple form and add data to the database. This is just the beginning!

Prototype step 1

I intend to build a Chaff Map app initially, which will help users find chaff produced by coffee roasters around the city for the purposes of growing mushrooms or simple composting. I started doing some simple data gathering and mapping, just to get back into the swing of things code-wise. Here’s where I have so far:

chaff map beta gif.gif

I used mapboxGL to render the map and icons here, with data collected from google maps and simply put into a google sheet. I used a separate mini app to geocode the addresses - since google maps did not provide that data. Then I downloaded the google sheet as a csv, converted it to JSON and brought it into my mapping app.

Of course I would like to make this more dynamic. I have a meeting scheduled next week with my data art prof to help me web scrape / and determine best practices for mapping. Check out some more process photos below.

I pulled data from google maps and put it in this sheet

then i used my geocoding app to convert addresses to geolocations for precise marker placement

Finally converted csv to JSON - now the data is ready to be used in my mapping app!

geocoding code

Mapping code below - for some reason I couldn’t figure out how to put the js code in a separate file called map.js. When I did so it just didn’t want to load. Weird! On a separate note, the reason I’d like to make this app is not only because it’s a smaller version of my full feature platform concept, but also because when someone wants to search google for coffee roasters, there are a number of things that determine what to show them - meaning a user does not see all available options, just a portion at any given moment. If I can develop a somewhat static list, so that I can display all results when a user visits, then this will be a bit more impactful I believe, because people can think less, they can just see, and act. 

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Mobile phones</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1> CHAFF MAP</h1>
  <div id='map'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiY2hhc2Fuc2MiLCJhIjoiY2pyd2cyeWduMGNnNzQ5cDk4bHRwYmVxayJ9.sAZTXvzkVOfBdIg3GmFsLQ' // add your own mapbox token to make this example work
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-73.97332, 40.685787],
      minZoom: 2,
      zoom: 10
    })
    rawData = [];
    map.on('load', () => {
   
      d3.json('data/roasters.json').then(d => {
        rawData = d;

        rawData.forEach(d => {
          let lat = d.lat;
          let lng = d.lng;
          let name = d.biz_name;
          let address = d.address;
          if (d.phone) {
            let phone = d.phone;
          }
          var popup = new mapboxgl.Popup({
              offset: 25
            })
            .setText(`${name}, ${address}`);

          var el = document.createElement('div');
          el.id = 'marker';

          var marker = new mapboxgl.Marker()
            .setLngLat([lng, lat])
            .setPopup(popup)
            .addTo(map);
        })
      })
})
  </script>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 110px;
  bottom: 0;
  width: 100%;
}

#marker {
  background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-marker :hover {
  cursor: pointer;
}

Thesis Statement

I plan to develop an app that allows businesses to post their by-products, so that other businesses, individuals or groups may acquire and use them. Tentatively titled, Givvr. Initially I will focus on one area to prototype and get user testing from - a Chaff Map. This will be a website containing a map to finding chaff produced by coffee roasters, and the site will contain informational insight into growing mushrooms from the chaff, using chaff in compost, nutritional values of things grown from chaff, and it will highlight some projects so visitors can see some nice results and be inspired.

Using insights from this first stage, I will then develop the full-feature universally usable platform. The purpose is to keep the heavy stream of waste produced by business from going to landfills. The effect of this make → waste pipeline is being felt already in the form of glacier melt, insect disappearance, coral bleaching and more. We are taking pot shots at the web of life, and it is harming our livelihoods. As one who actually enjoys being outside, this is an issue near to my heart. And as a maker, I would like to get more items for less money.

Similar projects include craigslist free and freecycle, which are great, but by themselves put the burden of this work on individuals, when I believe the pressure needs to be on businesses. Of course I am influenced by the incredible work of various organizations, my own prior company Greater Good / Charity USA, the Sierra Club, Keep American Beautiful, the philosophy of upcycling, and more - yet these groups more often solve problems that we can see, rather than help uproot problems we can’t. There is a really cool company called Terra Cycle, with offices in New Jersey, which has a similar function to my goal - but I believe we would work better in tandem than in direct collaboration or cooperation. I plan to meet with them. Terra Cycle delivers Terra boxes to places that are of a single product type. They then pick up the boxes and convert the items to new products. The items can be of any kind - cigarette butts, tech waste, compost - Terra Cycle has a solution. This is exactly the philosophy I believe in, as trained microbiologist I am also aware of the patterns and systems in nature that convert one substance to another. It happens within our cells all day every day. And at its simplest, the process is simply break apart, put back together, often not the whole way - as is the case with meat eating. Basically nature converts matter, it does not waste it. So in my mind we need to become better converters, wasting only that which benefits our environment.

The reason I feel the need to build this type of solution is because none of the above groups accomplish what I intend to do - create a centralized database of consistently produced by-products of business. I can go through each individually. Amazon is a marketplace, like my app, but the vast majority of items must be purchased, unlike my app, where every item will be free. Craigslist is a marketplace, and an upcycling community, but is focused on individual donations to drive its economy, unlike my app, which focuses on the waste stream generated by business that is largely unseen. World clean up day made an app for mapping trash, but again it depends on the contributions of individuals to make it work, mine depends and is focused on businesses. Yelp contains search and find functionality like I want my app to have, but it is mostly for people to find food or services, or a place to find lots of products, unlike my app which is a place to find a single product somewhere in the city. The communities/philosophies of the various up/freecycle movements, and charitable groups are great, but they do not execute the technical implementation that yields a tool like I intend to do, rather they leverage communities and systems to alleviate the symptoms of this negative cycle, while persistently pursuing political progress - something I do intend to do. And they also mostly depend on individuals to drive their work. Of course I will depend on individuals as well, but at the consumer end rather than the responsible originator end. For too businesses get off scot-free for their waste. Once I develop this tool, gather users, and build a community, I can show this system to policy makers, so that they incentivize its use. If it then becomes cheaper for businesses to share than to waste, then we may find ourselves in a much better, much cleaner world. But before that happens, there needs to be a tool out there that is easy for businesses to use, and right now, the best product for businesses to manage their waste is the cities’ garbage trucks. A wholly simplistic and short-sighted solution that in my mind requires a radical solution, a tangible solution, a technical solution.

I am quite confident in my Javascript, HTML, and CSS, enough to build my prototype starting today. This semester I have some classes regarding databasing, which will provide the ability required to develop a full-fledged app. The initial prototype will be a static site, with a simple usable map and some links to content. This I will play test for my midterm. From those insights I will better understand how to implement a dynamic site - what content is desired, what functionality is required, and what is not. The full site draws direct inspiration from a number of sites - amazon, yelp, mcmaster carr, open table, thingiverse, wikipedia - and will mostly be a process of mixing and matching the proper functionality from each, combining it into a new app which does not yet exist. I already have paper sketches for the full app, and during the Chaff Map prototyping phase I will also get insights using paper prototypes of the full Givvr platform.