How I created website mockup generator app?

In this article, I will present to you the idea, execution and problems that I encountered during the development of my new app, called Marketron.

The Idea

Did you ever want to create a simple mockup of your website, to see how it would look like on other devices? And I don't mean opening up Chrome Inspector and enabling responsive views, but having the actual image of a device (be it iPhone, desktop computer, or any other device) with your website on it? It is possible of course, but it is time consuming, even for only one device. First, you have to create a screenshot of your website with the right resolution, so it will match the display size on your device. Then, you would have to find an image with your wanted device on it. After finding it, you would have to open an image editing software (Photoshop, for example), and spend some time resizing the screenshot and combining both images together, to make the mockup look good.

But my idea was to simplify the whole process. I would like to just enter the URL of my website and select the image of device that I would like my website image to be on, and then let the application do the work. And that's how I came up with the idea for Marketron.

Execution

Mockup generator

First part of the web application that I had to do was to create a simple CLI tool, which would:

1. Create a screenshot of a website
2. Transform that image, using perspective transform, to fit the selected template
3. Merge transformed screenshot with template image

I decided to go with Python to create the CLI app, since it offers some amazing libraries for image manipulation (Pillow and OpenCV), as well as library for getting the screenshots of a website (Selenium).

The Python app was built on top of a Click library, which made the development of a CLI app much easier. I predefined some template images with perspective transform parameters and created the app, which accepts website URL and a preset as an input arguments. The Python app will then get the screenshot of a website, perform a perspective transform on it, and save the generated image.

Web API

The API was the easiest part of the project. For the API project, I went with Laravel, as I'm quite familiar with it, and it offers everything I needed out of the box. I created the authentication controllers and Image service, which was just an proxy from the user to the Python app. I saved the generated images as a private objects on AWS S3 Buckets. When authorized user wanted to access the image, presigned URL was generated for the user only. This enabled images to be private for authorized users only, and were not accessible for unathorized users.

Frontend application

When API and Python app were created, I quickly create a simple design for the website. Website only has 3 main screens:

• Landing page
• Generator page: page where the user can choose the desired configuration for mockup
• My mocks: page for signed in users, with the history of their mocks

The whole frontend application was created with NuxtJS and Bootstrap framework.

Next steps

As application is still in early stages, there are some things that would need improvements. Mainly:

• Speed: I would like to improve the performance of Python application, to improve the speed of mockup generation
• More templates: enable user more choice when creating a mockup
• Configurable: give users more options when creating a mockup

Thank you!

Thank you for your time reading this article. I would like to hear your ideas and critiques of Marketron application, as it is nowhere near finished yet 😊. The application is available on https://www.marketron.app .