Some of the projects I’ve been working on in 2018

February 06, 2019

Tappr Dashboard

Tappr Dashboard Screenshot

Tappr is a Fintech startup offering payment processing solutions to small and medium merchants. Tappr asked me to lead develop of the merchant dashboard, a web applications showing transactions data, sales analytics, and offering a variety of integrations with 3rd party integrations and exporting options.

Below is a screencast of the app in action. For best viewing please click the full-screen button. The app is fully responsive with a nice mobile experience, but is shown in this video on a 1080p screen.

Diakrit Navigator

Diakrit Navigator Screenshot

The Navigator app is one of Diakrit’s sales tools for Real Estate Agents and Property Developers. It gives buyers a realistic view of development projects, including 2D and 3D renders of interiors, units, and the surrounding area. Features include a realistic “walk-around” experience of homes, similar to Google’s Streetview, and a “Sun Study” feature, showing lighting of the property throughout the day.

Under the hood the app uses React, three.js and WebGL to render models of residential units, giving buyers a chance to “visit” their new homes interactively, in some cases before they are even built.

The application features extensive options for customizations and theming, allowing sellers to integrate it into their web products and make it look and feel like it’s part of their brand identity. The app shown in the video was used for internal development and testing purposes only, and includes sample content only.

Diakrit UI library

Another one of the exciting projects I got to work on at Diakrit was a library of UI components implementing Diakrit’s design language, to be used across all future company product development.

Previously the company’s styleguide was implemented by developers as a set of SASS stylesheets, and we were ready to move to a more modular and reusable approach.

Some of the features of the library include a self-updating documentation - as components are added a new documentation page is created automatically, featuring a live code editor!

Try it out - this is the documentation (with most of the components removed) - change the code samples in any page and see the results update in real time!
Diakrit has asked me not to share the more recent development, so this is a version very early in the development process, with only a few simple components, like buttons and typography, included.

The source code for the library and documentation is on Github. Feel free to look around to get a feel for my code style and how I architect and structure a moderately complex application.

Dozens more components were added to fully codify Diakrit’s design system. In fact this library is what drives the Diakrit Navigator app mentioned above!

Written by Felix Volny