Early in my career, I was doing both design and front-end development. My interest in programming has never faded away, even when I started to focus more on the design side as I grew into design leadership role.
Outside of work, I like to play around with learning new technology and build all these side projects for fun. Some of them are just conceptual projects that sits in my computer, but a portion of them do get launched to the market for othere people to use. Here are some of those special ones.
shotsnapp
Create beautiful device mockup images for your product design
Shotsnapp started as a simple web-based tool to place a image inside an iPhone device mockup — as a way to solve my personal pain point when working on slide presentations at work. Over time, I evolved the product by supporting more devices (laptop, display, wearable etc) and providing more customisation options for the users. To monetise the product, I've introduced additional templates and features that can be unlocked by paying for PRO access.
Year
2018
Status
Active
Role
Design & web development
Stack
React, Firebase




ICONSVG
Quick customizable SVG
icons for your projects
ICONSVG is a tool to simplify the process of finding and generating common icons for your project. You can browse from a collection of basic and commonly-used interface icons, modify some of its appearances including colour and stroke, then download the icon, or copy the SVG code into your code editor. It aims to simplify front-end development work, without having to open a design editor just to change some basic properties.
Year
2018
Status
Active
Role
Design & web development
Stack
React


Overframe
Record your design prototype with phone frame overlay.
I always record my app in the iOS Simulator and prototypes that I made in Figma. But I don’t know how to put those videos inside a nice phone mockup in order to share them on Twitter, Dribbble or even to upload to my portfolio. Instead of learning Adobe After Effects or some kind of video editing tool for that, I've decided to build this device mockup overlay screen recorder to solve that pain point.
Year
2018
Status
Inactive
Role
Design, web & app development
Stack
Electron, JavaScript



Coaster
The easiest and fastest way to search for Unsplash photos on macz & Windows
In my design workflow, I found myself constantly taking screenshot of the photo page on Unsplash to use in my design mockup. Downloading full resolution photo feels too slow for me, and it will increase my design file size. I needed something that allows me to do a quick search, copy a photo to clipboard or quickly drag it into any app. With that in mind, I started to explore the idea of building my own Unsplash dekstop app and Coaster was launched
Year
2017
Status
Inactive
Role
Design, web & app development
Stack
Electron, JavaScript, Unsplash API


