Too Green To Go

5 min readSep 30, 2021

This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (summer term 2021).

Abstract

With To Green To Go we want to create a platform through which plants can be exchanged or given away locally for free. It doesn’t matter if they are whole plants or just their offshoots, they all find a place in our feed. In addition, surplus accessories such as pots can also be passed on. Unused plants can be saved from dying and as a user you contribute your part to urban greening.

Introduction

The idea for Too Green To Go comes from the trend of greening your home or room with plants. Many know it from their own experience, the plant in the corner of your room that you bought weeks ago is no longer doing well. Throwing it away or letting it die would be much too bad. The same goes for the offshoots of your big plants that you have no use for yourself, but don’t want to throw away either.

For these cases, a platform with the possibility to swap or give away these plants would be helpful, and this is where we come in with Too Green To Go.

We wanted to create a platform where you can either give away or trade plants in a feed similar to “Vinted” or “ebay classifieds”. You should be able to upload plants yourself with your self-created user profile, and store basic information there in a filter system, like size, genus and so on. Users looking for a plant should be able to use a search function via these filters and then contact you via a mail so that you could then arrange a meeting for the exchange.

Method

The start was a bit bumpy, as we were all still involved in exam preparations or other projects. At first, everyone focused on the progress in the respective learning tracks so as not to miss the schedule. We further agreed on the basic functions of the platform, which was done pretty quickly. We did so by talking to plant enthusiasts in Münster and by inspecting other similar platforms. In the course of this program phase we lost a few group members until there were only four of us left. Therefore, we were unfortunately forced to ignore the quite ambitious ideas and suggestions for the time being and to concentrate on the essentials.

The heart of the whole thing would be the uploaded plants, and the possible other functions should be built around these displays if possible.

The actual work on the project started with the creation of a prototype with Figma to clarify basic questions about the design. At the same time, a flowchart of our component architecture was created to illustrate the basic structure of the website for our web developers.

In order to start coding we created a new application in React. This was later connected to our Github repository to be able to work on the project simultaneously. Based on the defined architecture we created respective frontend components in react which were then linked to each other using simple “Link” tags. Those linked components were further set up in the app.js file. Here, we used the “Switch” tag according to our tutorial videos to make sure that the path remains withing the react application and does not unnecessarily sends a request to the browser. After everything was setup, the coding within each component began. For CSS we used both, minified CSS (see index.html file) and normal CSS files.

Project Results

The most important pages of our application are the homepage, login, register, and plant detail pages. On the homepage the user can see a small info slider that describes the mission of the platform as well as all uploaded plants. Those plants are displayed in a card design showing a picture, name, and description of each plant. This plants component was created by using a placeholder database which was taken from the tutorials provided. After the creation of the backend by our supervisor, we were able to replace this placeholder with our future database. Because the backend does not include a picture variable yet, we used a placeholder image for each plant card. By assigning each plant a unique ID it was possible to link each individual card to a plant detail page which was supposed to contain further information about the plant as well as the email address of the owner. However, because of time constraints this page is not finalized yet. Therefore, the platform cannot be used by the public at this time. This is also because the login and register pages only contain the respective forms, however, currently the input data is only sent to the console. A respective link to the underlying database still needs to be established to be able to add and save a new user. The idea is, that when a user logs into his or her account that he will not only see all the uploaded plants of the community but also his or her own plants uploaded on the platform. This is were plants can be added and deleted as well.

To sum up, our platform is supposed to enable plant lovers or newcomers who don’t want to spend a lot of money on a new plant, to connect. Our platform solution is supposed to provide a more structured overview of disposable plants in a user’s area which makes the search for a new plant more pleasant compared to unstructured Whatsapp groups that are already in use by the community. Although, the platform is not yet ready to use, we as a team learned much about setting up such a project, including the respective programs such as Figma, Github or vsCode. Because our team only consisted of students completing the UX or Frontend Track our learnings and results mainly concern the pages’ structure and frontend. As complete newcomers we were happy to learn about the basics in html, java script, react, and css. We learned how to build components, how to link them, how to assign functions and how to link a database from the backend to the frontend. Thus, the impact of this project is on our team. It provided us with the basic technical understanding of building a website which can serve as a basis for further personal development.