Let’s start your zero waste journey with us!
This project was carried out as part of the TechLabs “Digital Shaper Program” in Düsseldorf (Winter Term 2020/21).
The idea: starting your zero waste journey doesn’t have to be overwhelming
An essential part of living a more sustainable lifestyle is, of course, reducing the waste we produce at home. But how and where to get started on this journey? When you are trying to find information and resources over the internet, it can be a bit overwhelming. Johanna, one of our team members, knows precisely how it is. By undertaking her own zero waste journey, she came across a lot of fragmented instructions and data, which seemed at times to disorient her easily.
“Oh, it would be so useful if we could find all this in one place, simply and attractively, like an online guide for our pockets.”
Aha! Suddenly the eureka moment occurred: to design and develop a web application for this purpose during the Digital Shaper Program at TechLabs Düsseldorf. And after pitching this project idea at the Ideathon Workshop, the team became complete! Three other techies and a mentor joined her, excited to work on it and make the Zero Waste Journey Guide real.
The start of our journey… the project journey
From the very beginning, we found ourselves on the same page. We wanted to create the most comprehensive guide possible, particularly for beginners on the zero waste journey. Something that included locations of thrift and bulk shops, as well as organizations working on local solutions; recommendations for sustainable brands and products, such as clothing and cosmetics; DIY recipes for cleaning products; suggestions for meal recipes (in-season and for leftovers) maybe with a seasonal calendar, and much more.
But what about the design? How could we create something complete and straightforward at the same time? Or even, what experience exactly would we like to provide to the users?
“How about a house where the users can navigate, choosing the room in which to start their journey?”
The idea came up during our first brainstorming, and we immediately got super excited discussing more details of how it would look like and imagining ourselves as users. Now we just had to discuss and analyze together with our mentor the technical feasibility of implementing our ideas.
Would building an interactive mobile app be the best option considering the time available and our new skills with the WebDev-Toolbox (HTML, CSS, JavaScript, React.js, Node.js)? Couldn’t developing a beautifully functional, attractive and user-friendly website also be a solution to our project problem and, at the same time, a more realistic alternative? After some talks, we decided on the second option, keeping the first one as a proposal for the future.
And what about the dream house of our project? Without a team member with a background in design, would anyone of us have the interest and time to learn what it takes to create an SVG image? Yay, we found a volunteer to take on the challenge! Using Inkscape, Franciele designed the house’s basic structure and “furnished” it from about 70 custom images, selected from libraries that offer free vectors for non-commercial purposes.
Finally, following an Agile workflow, we designed and prototyped our website on Wix (if you want a prototype, we recommend you to use Figma, which is used by many professionals). That allowed us to define and see how the homepage and subpages for each house’s room would look.
“Ok, now, let’s code!”
Thinking in React, building our website and getting proud of the result
To build our website, we decided to do it with React and TypeScript, using create-react-app as a starting point and CSS for styling. CSS was part of the Web Development track, so we could apply what we had learned during the learning phase. However, developing with React required some of us to change the learning track from Backend to Frontend or even learn quickly on our own. Using TypeScript, we counted on the excellent explanations from our mentor and reading complementary materials.
Having decided that, we created the project in GitLab, broke the user interface from the prototype into small parts, opened the related issues (freely auto-assigned), and BANG! We caught fire coding and building our first components.
“In separate Git branches, of course!”
Keeping with an Agile workflow, we met online twice a week to show what we had done, set issues and deadlines in a timely manner, ask questions, and exchange ideas. And so, in about five weeks (yes, seriously in only five weeks), we achieved our significant milestone: a running website implemented and hosted via GitLab Pages, composed of a homepage with seven core features implemented and four subpages with another three components.
The last step was to finish the content production, add the texts in a JSON file, format them in Markdown syntax, check and correct some details, and then ta-dah! Our website was ready for Project Pitch day!
“Wow, it’s amazing how it all works! I mean… ok, there are still one or two nice-to-have issues, but I’d have never thought it will look like that good 😍”.
It was our team’s reaction at the end of the project. Although we lacked time to implement two planned features, the recipe suggestions with a seasonal calendar and a zero-waste community subpage, as well as to improve a few aspects, such as the responsive design for mobile and tablet screens, we are definitely a team proud of what we got done, of all we learned in this process, and of the collaborative and enthusiastic way we worked together.
Are you interested in taking a closer look at our website? Click here. We hope you enjoy it and feel inspired to start or even keep following your journey to a less wasteful and more sustainable lifestyle with us!
The Team:
Franciele Drews de Souza: Web Development (Frontend)
Johanna Höllinger: Web Development (Frontend)
Marianne Ohm: Web Development (Frontend)
Thomas Hanneken: Web Development (Frontend)
Felix Hechler: Mentor
