Screenbean - Pimp your screenshots 💅

Demo | Github

✨ScreenBean✨ is a tool to add colorful backgrounds to screenshots. This idea came to me when browsing Dribbble. I've realized a lot of promo pictures have the same pattern:

• Rounded corners of the product
• Drop shadow around the product
• Background using the primary, accent or other complementary colors
• Sometimes additional complementary shapes in the background

Here is an example of the current Dribbble startpage and you can see what I mean.

💡 Motivation

I often have to pitch new websites or pages to colleagues at work. Since I wanna leave a good impression, I wanna spice up my screenshots to make them stand out more. Though whenever I tried to promote my website it never looked as good as the ones on Dribbble. Probably because I am not a designer -- but I have recognized that adding things like rounded corners make a huge difference.

After a while I wanted to automate this process. So on a boring Friday evening I wrote ScreenBean just for the fun of it.

📝 Technical Decisions

First and foremost I wanted to keep the app alive and "don't worry about it ever again". I don't have any interest in generating revenue with ScreenBean -- but I also don't wanna loose money. So I tried to implement everything client-side. For sure it would be the better technical decision to use a Serverless function to, for instance, generate the images. Though in my context I just didn't want to spend a dime.

👨‍💻 Tech Stack

At the heart of ScreenBeans implementation are two libraries from NPM:

• html-to-image: Generate images from DOM elements client-side
• node-vibrant: Extract prominent colors from an image

So with these two libraries all I had to do was essentially creating the images using normal HTML/CSS dynamically. Then I can just generate the *.png graphic using html-to-image. Thanks to node-vibrant I can take prominent colors of the image so it usually looks complementary.

I have used React to help me with building the different preview images, the upload mechanism and saving the images.

Since the application is client-side only I could just use free-tier of Netlify for my deployment.

I am a huge fan of TypeScript, though for this project I have decided not to use it. Since I don't need to handle a lot of data throughout the application there did not seem to be a huge benefit of using it.

Demo | Github