Karma

An mobile application to check ones own ecological footprint

05 November, 2018

This work was part of a coding contest, Coding Camp Heilbronn in southern Germany. With a team of four we could chose between four Challenges. This contest was sponsored by Schwarz IT, so the challenges were all related to user experience in a groceries store. Each team had less than 36 hours to develop a solution which would make the shopping experience better for the customer. Our Team consisted of four developers with various backgrounds - but since we are all fond of JavaScript we knew that we would build a web application.


Idea

We decided that we wanted to make an app which makes the customer aware of his ecological footprint. We imagined that users are more likely to buy sustainable products when we make them aware which products have which footprint. Coupled with a good user experience and a gamification approach we had a real good concept.


Implementation

The user buys his groceries as normal and receives his receipt after the payment. On this receipt, a QR code is placed with all the information of your purchase.

Receipt

As you can see there is an url printed on it this opens a website, also downloadable as PWA, on which you can login with your google account.

Login

After you login you see your profile with your google-image and your current Karma and your recent purchase.

Profile

Now you press on "Kassenzettel scannen" which means "Scan receipt". After you successfully scanned your receipt, you see a screen which shows you how much Karma your purchase was worth. The more the better. With metrics like how much water was wasted and how much CO² was produced, the app evaluates, how much Karma your purchase was worth.

In the lower part of the screen, you see a list with all your purchases, including how much karma you gained with it. If clicked on it, you see a more detailed screen

Purchase

This screen shows a more detailed evaluation of your ecological footprint. These values would come from a sophisticated database which has values linked to each product, but since we were under a rush, we decided to use randomized values.

In order to motivate each customer to buy more karma-related products, we decided to use a highscore and trophies one could collect.

Highscore

Trophies

All these values get live updated as soon as something changes in the database.


Technologies

For our frontend we could not decide between React, Vue.Js and Angular - we decided to use angular since the most team members used this technology before. We first decided that we wanted to use NodeJs for our backend, but since time was our enemy we reconsidered and used Firebase. Firebase is highly suitable for quickly developing an not-too-complex web/mobile application. It relies on a JSON database which automatically propagates changes to all online clients. Firebase integrates Angular so this was a perfect fit, as well.

To summarize following technologies were used in this project:

  • Angular 7
  • Firebase
  • Sass

Experience

The idea of quickly finding teams, thinking of an idea and implementing it with a deadline of 36 hours does sound like a lot of fun. However, at the end of the event I was exhausted. But we managed to create a bug-free product which could lay a foundation for future ideas related to a more sustainable shopping experience.

In the end it was a nice networking event. I learned a lot about the Firebase technology and I did get to know a lot of great other developers.

Want to get in touch?

Contact