Webapplications & Websites

Stereo-Types Radio

Bridging the gap between musical styles. Stereo-Types Radio provides an exciting way to discover new music and opens the opportunity to learn a thing or two about the connection between genres. I used this project to discover a new workflow. Using Sketch to do the design and Zeplin to ease the transition to HTML/CSS. The frontend framework of choice was React/Redux with ES6 using Webpack.
webpack, nodeJS, mongoDB, sketch, zeplin, ECMAScript 6, react, redux

BrickScout Frontend

BrickScout is a worldwide marketplace for LEGO I helped develop as head of frontend development. Traders can open a shop, manage their inventory, configure shipping options, setup marketing/coupon campaigns and more. Buyers get an easy to use interface and an advanced search to quickly find their desired products. Have a look at www.brickscout.com
bootstrap, webstorm, sass, jasemine, angularJS, gulp, coffeescript, jira, git, bamboo, confluence, scrum, kanban, npm, bower, google analytics

Marketing Action Center

This webapplication uses all the state of the art tools. AngularJS to be able to react to user inputs in real-time and to keep the frontend code modular and clean. Grunt and Bower/live-reload to ensure a smooth development experience. A rails-style 'convention over configuration' framework written in Coffeescript for easy object-oriented programming in Javascript. We used Karma and Jasemine for frontend testing. The backend is written in JavaEE to fit into the existing Java infrastructure. It uses a MySQL database for easy data operations and a MongoDB for data that needs to be available quickly.
grunt, bower, bootstrap, npm, webstorm, intelliJ, java, less, maven, git, jasemine, angularJS, coffeescript, mongoDB, java ee, scrum, kanban, jira, confluence

Sorted - Clothing

Website and identity for berlin based fashion-label sorted-clothing. The website features a floral flash-animation to underline the youthful and dynamic spirit of the label. I created an administration CMS in which the customer can add new designs and change the blossoms, leaves and colors in the background to fit the style of the individual design. I also installed a google-analytics tracking and did a full search-engine optimization.
jQuery, google analytics, actionscript 2, SEO, javascript, mySQL, svn, css, html, actionscript

Tag Integration Frontend

Tag integration is Webtrekk's tag management system for which I built the frontend. A tag manager helps customers to quickly setup the desired tracking javascript on their website. It features a drag-and-drop interface for the creation of tag-containers. The popup-dialogs for editing tags are built upon a highly dynamic system so they can be created via a CMS.
jQuery-UI, pureMVC, jQuery, sass, html, ant, svn, grunt, bower

Measurement Data App

This is one of the more traditional webapps I created for big german construction company Bilfinger-Berger's measurement department. It loads data aquired at different construction sites and stores it in a database. The user can then view the data of a desired timerange and export it in csv-format or create pdf-reports.
Bilfinger thumb
jQuery-UI, jQuery, php, highcharts, mySQL, svn, html, css

Roots.Robots

I created this site to showcase the music I've created over the years. It provides a simplistic interface that stays out of the music's way.
javascript, css, jQuery, php, mySQL, css

Data Visualizations

Product Recommendation Widget

Pure javascript component that displays product recommendations. It is fully customizable to fit the webpage it is being deployed on.
Reco widget thumb
javascript, git, npm, bower, grunt, jasemine

TV Tracking - Chart

SVG visualization-component that depicts the effect of a tv-spot on a customer's website-traffic.
Tv tracking thumb
svg, raphael, javascript, highcharts

Process Analysis

SVG-visualization that depicts how many visitors of a website went through each step of a process (e.g. order process with steps product view -> shopping cart -> product buy). Here the customer can see how many people exited in which step and optimize that process accordingly.
Process analysis thumb
svg, raphael, javascript, svn

Crosstable SVG - Chart

Shows the correlation between two datasets. Values are color encoded like in a heatmap, red for highest blue for lowest and yellow for values in between.
Crosstable thumb
svg, raphael, javascript, svn

Page Detail Chart

Displays statistics about a page of a website like which site did people come from and to which site did they leave.
Page detail thumb
javascript, raphael, svg

Speed - Dial Chart

Visualize key performance indicators.
actionscript 3, flashdevelop, ant, photoshop, svn, actionscript

Clickpath Analysis

Clickpath analysis is a flash-visualization component that enables users to view the paths a customer has taken through their website. Pages and paths that have been visited more often are displayed as bigger circles/arrows.
actionscript 3, flare, flex builder, svn, actionscript