Mokkup, a mini-tool for your next image presentation or post. Glow up your images with pre-built gradients (or simply create your own), add a browser wrapper and quickly set its dimensions for your social media profile. A side-project inspired by carbon.


  • React
  • TypeScript
  • Chakra UI
  • Jest


After my semester exams, I wanted to dive deeper into front-end testing and give Chakra UI a try. As I scrolled through various social media feeds, I came up with this inspired idea for sugar-coated Images.


As it is categorized as a tool, I aimed from the start for a Single Page Application. I chose Create-React-App, as there was an existing template with Chakra UI and TypeScript. Chakra was an interesting pick since I stumbled across a plethora of posts supporting its ease of use and accessibility features. (It also has a cool name 🍃)


Throughout development's time, I discovered some scalable patterns as I was searching for the best practices. Scaling the image according to the user's screen size and then scaling (again) it to the desired resolution was probably the hardest part of the application, however a workaround was found! Finally, there's a taste of CI, as I set up a few hooks with husky, such as pre-commit test runs.

Rest Works

Tea is served with cookies!

In order to keep a functionality and fondness score, I am using GoSquared Analytics to track visitor navigation. Worry not, GoSquared is open source!