Our story starts with a blog post. Not this one, but one I had to write for work...

It was a highly technical piece, but the platform I was using didn’t support proper code blocks—frustrating, right? I could still use a code image generator (like carbon), but that would make the code non-copiable, which might make my readers frustrated as well.

Fortunately, it did allow for iframes, which sparked an idea:

What if there was a service that generates pretty code blocks, not as static images, but as dynamic, embeddable iframes?

With that inspiration, my weekend plans were set: I was going to build a tiny, free SaaS, and I invite you to join me on this journey!

In this series, we’ll cover the entire process of turning our SaaS idea into a live product in three chapters: the first focuses on product design and project management, the second on building a web app, and the third on what it takes to get your service live and online. I’ll share insights from my experience as both a dedicated coder and an engineering manager.

Chapter 1: The product and the plan

SaaS—Software as a Service—is a type of web application where you receive a service over the internet without needing to install anything.

What we’re aiming to build is a SaaS for tech bloggers: instead of installing and configuring a code highlighting library on your platform of choice, you will use our service to generate and host these code blocks. This way, you can embed them wherever you go and get the same results every time.

In this chapter, we will explore how to prepare for developing a SaaS project. We’ll identify the challenges unique to SaaS projects, design the product, and create a comprehensive work plan.

Things to expect

Building a SaaS is similar to building any web app: it’s a creative process that starts with an idea, followed by a product design, and culminates in coding with your stack of choice (mine is TypeScript, NodeJS, and React).

However, SaaS applications have additional complexities due to their need to operate at scale. These requirements include:

1. Security: Defending against common attacks and ensuring the app is used only as intended.

2. Scalability: Ensuring the app can scale up if needed and understanding the associated costs.

3. Monitoring: Being able to verify that the service works as expected and diagnosing issues when it doesn’t.

4. BI & Analytics: Understanding how people are using the service. Gaining insights into its usage helps us assess performance and identify areas for improvement.

These are all things we need to take into account, so on to our next order of business: turn our idea into a simple product design.

Become the Product Manager

Before we dive into building, we need to define our product. Although this might seem like an extra step, it helps transform our stream of thoughts and ideas into a visible, tangible proof of concept.

When approaching the task of designing a product, the key question we need to ask ourselves is: why are the users here? They want to embed a piece of code, make it look good, and have the process be as easy as possible. Our product design needs to reflect these expectations.

After a brief brainstorming session, here's what we can expect the general flow to be:

1. User arrives at our site.

2. They paste their code, and get a ready-made pretty code block.

3. They copy the iframe tag.

4. They put it on their website.

And now it's time to turn this into something we can actually see, by creating a wireframe. A wireframe, is a simplified representation of your product's UI, that provides a general impression of what the product is going to look like. You can use any software of your choice, from Miro to Balsamiq to even Google Slides. Personally, I prefer Figma for sketching ideas.

After some experimentation, here’s what I came up with:

It looks a bit empty, but that’s intentional. We want generating code examples to be as simple and quick as possible, so the design emphasizes the instructions—paste your code!—along with a preview of what a code block looks like. Note that this is just a draft layout, meant to show the basic structure of the page, and not a complete (or even exceptionally elegant) design.

Next, we create a complete storyboard that shows the user flow:

Note that it’s important to explain our design choices at every step of the process, to make it easier for us to remember why we designed them the way we did, especially once we build the UI.

You can find my full figma file here

We now have a clear idea of what the product is going to look like. Next up: giving it a name!

Naming (and getting the domain)

Now for the hardest part of every project bootstrapping—naming! Many of us consider this a crucial and delicate part of our creative process, as changing the name later can be quite challenging.

My name ideas centered around the concept of a service that makes your code visually appealing. “Prettifying” code is a term that has gained popularity, especially with the advent of “prettier”, a tool in the Javascript world designed to format code.

Eventually, I landed on Prettify My Code, which evolved into Pretty My Code, and finally became PrettyMy.Codes.

Why "Codes" in plural, you might ask? It turns out there’s a TLD (top-level domain) called .codes, so I went ahead and purchased the prettymy.codes domain.

Now that we're done with the naming, one last thing before we can start coding: create tasks.

Task management 101

One thing I’ve learned as an engineering manager, and implemented in my personal projects, is that the key to successfully completing a project, even a small one, is to divide it into manageable tasks. This approach provides a clear roadmap of where you are and what’s left to do, helping to prevent us from "dropping out" of the project.

Personally, I find task decomposition to be the best method for planning my work. With task decomposition, we start with the largest task possible (usually, our goal for the entire project) and then start breaking it down into smaller and smaller tasks, that gradually become more and more practical. The original task remains, but it is now the ultimate task in our project, called a "milestone".

Here's what it looks like with our project:

1. We start with our goal: releasing our SaaS.

2. We define what’s included in that goal, which is our simple product: users visit our site, paste their code, get an iframe tag, and embed it on their blog.

3. Is that too big and abstract? Yes, it is! So we break it into smaller tasks, such as: allowing users to paste their code into the page and display it, generating an iframe code, and ensuring the correct code is shown when embedding the iframe.

4. Want even smaller tasks? Sometimes I do! We can break them down further, for instance: setting up a NextJS project, creating a component that allows for syntax highlighting, enabling code pasting into the component with CTRL+V, and so on.

What I ended up with, was a three stage plan:

1. Figure out syntax highlighting and code formatting in the browser.

2. Build the entire application, end to end, using Typescript, React and NodeJS.

3. Deploy and make our service production ready.

Choosing the program: when it comes to task management, there are many useful tools like: Monday, Notion, Trello and even Jira.

But for smaller projects, where it’s just me, I prefer using Google Sheets. Wait, what? Yes! It’s really easy to manage tasks in a spreadsheet, and Google Sheets even offers a “tasks” template.

To sum it all up, here is what a task sheet would look like:

Now that we’re all set and ready to go, it’s time to start coding!

Outro

Let's recap what we reviewed in this chapter:

• The challenges of creating a SaaS: Developing a SaaS is a lot like every other web application, with the added challenges of being able to scale, handling security, and setting up visibility via monitoring and analytics.

• Product design: Crafting a product starts with an initial idea of how to guide the user through your flow, turning ideas into a tangible proof of concept, and iterating on designs through wireframes and user flows to ensure the product serves the idea it was created to implement.

• Task Management: Successful project completion hinges on breaking down the project into manageable tasks, starting with high-level goals and decomposing them into smaller, actionable tasks to keep the development process on track.

In the next chapter, we'll cover the basics of building our SaaS: from choosing a stack, to handling syntax highlighting & prettifying in the browser, as well as writing our API.

In the meantime, you can give PrettyMy.Codes a try, today!