Building a side-project

Table of Contents

So as you noticed, I’m late with my newsletter Issue this week. Everything is fine. I just got sidetracked a bit. The whole weekend I was building a side project. Late nights, coffee, some techno music — like the good old days when I was writing open source libraries in the university.

But this time, I had a different idea. As you know, I like writing, and I’ve been writing quite a few blog posts on vadimkravcenko.com. And I was constantly annoyed with the generation of social covers by hand. It took 10 minutes of my time every time I wanted to post a new article. Unacceptable.

So I decided to build a utility SaaS that automates the whole process of generating images with a single line of drop-in code.

https://covertool.io was born.

Update: I see a lot of people registering, I'd like to say that I didn't plan on investing too much time into it, so please don't sign up.

I'd like to propose a few FREE alternatives that can do the same things that covertool was meant to do and more:

• https://cards.microlink.io/ - a very flexible tool, a lot of automagic stuff.
• https://coverview.vercel.app/ - a tool that you can use manually.
• https://og-image.vercel.app/ - OG Image as a Service, not as flexible, but decent.

Straightforward pricing, no hidden costs, unlimited images, and easy setup. It was fun building it, and the first thing I learned was that — generating beautiful images on the server is very hard.

I did have quite a few “AHA!” Moments when I fiddled with this service. The first one came after I successfully generated the first social cover, you will be surprised, but it took me six whole hours to get to that. Reasons being:

Outdated HTML processing

I’ve spent several hours battling with the python integration of wkhtmltopdf library (yes, pdf) to ensure the HTML is processed correctly. The WK in wkhtmltopdf stands for WebKit, the engine that renders images in the Safari browser. It was also used in Chrome, but they split up a few years ago. Sadly, this WebKit engine that ships with this library is stuck in the year 2010 with the standards of a very old Safari 5 browser.

No complex HTML is allowed, no external CSS, only basic classes and styles, which was quite annoying. But I’ve dealt with that more or less.

Not very popular libraries

So apparently, generating images in python from HTML is not a very interesting topic because while looking for answers to obscure questions from deploying image rendering inside a python docker container, I stumbled upon StackOverflow questions with zero answers and GitHub issues that had zero replies.

I was basically a man in the jungle, cutting my way through a mix of outdated Linux binaries and python packages based on even more obsolete things. Fun times.

Here comes Tailwind

If you don’t know, Tailwind is the new and popular kid on the block of fast prototyping. It has all these components ready that you can copy and paste into your codebase without even thinking. Precisely what the programming was meant to be.

I must say there are tons of good things to say about Tailwind. In the end, I built most of the dashboard with the components they provided. But integrating the Tailwind modules compiling into the Python project with Docker was not fun.

The result was more than satisfying, though — you can check it out here. There’s a free 14-day trial that you can cancel after registration.

Figuring out a way to protect the images

So as the whole concept is based on a “one-liner drop-in replacement”, I needed to figure out how to ensure the image links do not get abused. Here’s an example link that generates a social cover.

https://covertool.io/vadimkravcenko.com/hlpkqz/?title=How I built the amazing weekend project&author=Vadim Kravcenko&theme=outline&bg-color=57b6ff

As you can see, there’s a domain and a short key that helps identify which Customer is using the service. But that doesn’t stop anyone from taking this URL from some paying customer and inserting it into their website. How do I protect against it?

Simple. The domain can be set only inside the paying customers’ dashboard, and I print the domain name on top of the social cover as part of the design. I doubt any website will want social images with someone else’s domain on them. So that problem was solved after I had a few sleepless nights of trying to find a cryptographic way to implement this. It shows that the most simple solution is also lovely.

Other parts of the SaaS

I’ve decided to use Auth0 for user authentication, Stripe for payment processing, Postmark for Emailing, and DigitalOcean for Infrastructure.

I’ve opted to use DigitalOcean as the hosting provider, as it was always my go-to provider for my pet projects. I wanted to explore how far it has come in the last few years. I must say I’m kind of disappointed. There’s not much that was done in terms of building distributed systems. Of course, you can set up Droplets and set up services on them yourself, but having out-of-the-box managed solutions that Google Cloud or AWS provide is a time saver.

Why build it?

I still love building stuff from scratch. Usually, at mindnow, I’m always in a crisis-solving mode, dealing with chaos, so when I’m getting my hands dirty, I’m not enjoying my time coding; more like trying to avoid disaster. So if you see me coding at work, something went wrong.

In general, such side-projects are an excellent way for technical managers and CTOs to keep themselves on top of their game. Keeping their mind sharp, building stuff from zero always has that allure of building it in some new and unexplored way, making way for different architectural decisions rather than a standardized approach.

I think for technical managers and CTOs, this helps them keep themselves on top of their game if they’re trying to build something from scratch themselves with some new technologies.

What's next?

I'm probably going to stash this as I do all my side-projects, as more often than not, I don't have the time to invest into the projects long-term. But it was definitely fun building.

---

Other Newsletter Issues:

• 🏆 Promotion-based development
• 💀 Every app has its skeletons
• 📈 The Toxic Grind