What is canva.com

Canva is a graphic design platform that provides tools for creating social media graphics, according to Wikipedia. In this article, I will share my thought process for deciding on the tech stack I would choose to build (or clone) it. Let's analyze this from one part of the stack to another (frontend to database), I will also share a bit of how I decided what tools to use in order to build my own SaaS (Martha AI).

Frontend

Canva is a media manipulation project where most of the work happens on the frontend. But there is also a lot going on in the backend, so I need to choose something not too low-level like jQuery, Turbo, or HTMX. I also want it to be performant with not too much overhead. I would choose to build the frontend with Svelte because it has a whole compilation step where the code I write is copiled and optimized into a simple and light JavaScript bundle. I don’t have to learn a new syntax like JSX, and it provides much more tooling to control how I render the UI (conditions, loops, etc.). It also offers very good reactive programming tools and state management out of the box.

Backend

Talking about the backend, I would choose something like Django, Laravel, Ruby, NestJs, or AdonisJs. On that side, various activities are happening at the same time, such as:

• emails being sent

• media being processed (analysis for viruses, compression, etc.)

• multiple users interacting (co-editing a design)

• searching and indexing data (search images by inputting text)

• account management (auth)

• plugin systems

• teams (groups of users sharing the same resources)

• scheduling for end-users

• payments integration (Stripe, PayPal, or whatever)

• notifications

• a lot of analytics

• A lot more stuff

I can certainly build something that integrates all this with SvelteKit, Next.js, or Remix.js (I personally prefer Remix over Next ), but it will quickly become VERY expensive (human, technical, and financial resources). Now, I can choose from the list of frameworks provided earlier (Laravel, Django, etc.). One important point to consider is what language I am proficient in and what about the team I have. If it's Python, then use Django; if PHP, then use Laravel, etc. I am personally good with Python and Django. But from the standpoint of the features all these frameworks offer and their ecosystems, using Laravel will be a good match. It offers a rich set of packages when it comes to stuff related to real-time communications, background processing, auth, payment infrastructure, notifications, and most of these come out of the box (job scheduling, notifications, auth & permissions).

Database

I would choose PostgreSQL. It’s very good at handling a lot of data and performing FTS (Full Text Search). It offers a wide range of capabilities for data indexing, searching, and typing (INT, Char, JSON, JSONB, Vector, etc.) in a vast amount of data while being very simple to operate and expand. For example, the whole Notion and Sentry platforms are running on PostgreSQL.

Hosting

I could host the whole thing on AWS, but I would need knowledge to handle that. If I don’t have enough knowledge, I would start on something like Digital Ocean and use S3 + CloudFront (CDN) to store files and serve them at scale and low cost. Personally, I have enough experience to host this on AWS while staying cost-effective (but that is another discussion).

A practical and personal example

I have personally built a complete SaaS (marthaia.com) with Sveltekit in the B2C world, and I used a similar thought process. It's an AI-enabled platform that generates long-form documents using OpenAI models. I wanted users to be able to leave the platform while it is generating content, so I needed the ability to run code as a background process and also store data. I didn't need much more, and most of the coding was on the frontend side (building the AI Editor, displaying text while it's being generated by the AI as a stream, etc.). I chose Sveltekit and added BullMQ to handle the background processing. Since I wanted users to be able to see text as it's generated, I needed a real-time protocol between the browser and the server. I could have chosen WebSocket, but because the direction of the text is mostly from server to client (98% of the time), I chose SSE (server-sent events). I wanted to move quickly, and I knew user data would be changing a lot, so I decided to store everything in Redis (acting as my database) and went live with the whole thing. Now it's running and generating revenue. The whole thing is hosted on a VPS and automatically deployed using a script I wrote and set up via GitHub Actions. You can learn more in this article I wrote months back.

At the same time, I work in a company where I lead a team of many developers. We have built a B2B SaaS platform and chose SvelteKit for the frontend and Nest, Django, and AdonisJS for our various backend services.