Buurkracht is an energy initiative that brings neighborhoods together in order to save energy. I ended up making a low-fidelity prototype that was supposed to encourage children to learn more about saving energy. The prototype did great, but the teacher did mention it might be too complex and costly to make. This sparked my interest and encouraged me to learn about what turning it into a high-fidelity prototype would entail.

I ended up learning a lot about Webpack, React, WebGL, Canvas, Node and many, many other things. In the end, time, being part of the cost, did prove to be a limiting factor, but I gained a lot of knowledge I did not posses beforehand.

Terrain Editor

One of the key features I had demonstrated in my low-fidelity prototype was the ability to deform the terrain and make it your own. These features could theoretically influence which energy sources one should opt for and offer a more diverse playthrough.

The land, water, sky, stars, sun and moon allowed me to learn quite a bit about shaders and topology.

Settings and internationalization

React made most of the application very easy to reason about due to its componentization and updates based on underlying data changes. Internationalization also became an effortless task with the use of react-intl. By updating a single locale property, all components that depended on that property would reflect their new locale.

Avatar Editor

The avatar editor makes heavy use of scalable vector graphics. They, unlike rasterized images, are crisp on any given resolution. It allows you to create many geometric shapes with ease, as Adobe Illustrator offers an export path. The files can also easily be inspected and modified by a text editor. This made it quite easy to dynamically add colors and mix objects as can be seen below:


If you have any questions, please don’t hesitate to contact me. The Github repository can be found here.