Work samples overview
TrackerGame.de
Gamification of a diet and weight loss journal, implemented as a responsive, single-page web application.
Features
-
TrackerGame allows its users to track their daily food energy uptake.
It offers various ways to create, manage and categorize food entries.
- To support the users motivation several game elements are build in, among them: Rewards, a quest and
task system, achievements, a tutorial, short- and long-term progress indicators.
-
A major design goal was to make it easy and effortless to enter new data and reuse it later.
All the necessary calculations can be done within the web app.
-
The layout is optimzied for devices with small screens.
-
Color scheme and design are inspired by casual games to underline the game character
Libraries and frameworks used:
-
Frontend: AngularJS, Bootstrap3, Less, D3;
-
Backend: Python Django and Django REST framework, Nginx, PostgreSQL,
(a version using Neo4j as a graph database is currently in development)
Links
Conway's Game of Life
MVC demo app written with a test-driven development approach.
-
Model and view are fully decoupled; this allows for switching between a Canvas View and a View using
<div>-Elments
while the simulation keeps running in the background
Libraries and frameworks used:
- Jasmine and karma Test Runner for unit tests
- requireJS to modularize the app
Links
Echtzeit: Hamburg in real-time
Simulated real time data visualisation, a project created during Hamburg Open Data meetups
-
Shows tiles that contain public data facts about Hamburg.
More Details are shown when the visitor hovers over a tile.
The Data is parsed from a Google Spreadsheet.
The layout is created by using CSS3-columns.
Libraries and frameworks used:
- AngularJS
-
Tabletop to import the Data from a Google spreadsheet
Links
Wubi trainer (work in progress)
An online typing tutor for the chinese "Wubi" input method (五筆字型輸入法).
Intended for learners of chinese as a foreign language.
-
Wubi is a input method that allows to type chinese characters based on their
components and overall structure. This is helpful when memorizing how different characters
look and very useful for chinese learners. Unfortunately there are not many Wubi-learning
resources available for non-native speakers.
-
The app is keyboard-centered and provides feedback for: Wrong or correct input, overall progress, and
warnings
for difficult characters.
-
It allows to practice the keyboard-location of the character components as well as the sequence for
whole characters.
Libraries and frameworks used:
- AngularJS, Angular Material
Links