Reverse-engineer A No-code Website Builder

What and why?

In this article, I’m going to analyze Carrd.co, a service for building responsive one-page sites, break it down into components to briefly see how a similar product can be built.

The Output

  • Personal sites
From Carrd.co
  • Landing pages
From Carrd.co

(See in detail at carrd.co/build)

Essentially, the output you can get from Carrd is simple yet beautiful and responsive personal sites and landing pages.

Design Concept

For Carrd, there’re 4 primary concepts:

  • Site: deployment configuration of a site such as title, description, language, domain, SSL certificates, Google analytics, etc. In software engineering, a Site is basically a configuration file for DevOps automation.
From Carrd.co
  • Background: each Site has a Background component, which sits behind all of a site’s elements. When rendering on browsers, Background is technically a mapping to CSS background property of HTML body, which can be styled to show either a solid color, a gradient, an image, or a video.
From Carrd.co
  • Page: the container of all of a site’s elements (except for Background). A Page defines how a site’s overall layout looks, how elements should be aligned with each other. A Page can also be styled and positioned to show like a card or a window. When rendering on browsers, Page is technically a top-level div.
From Carrd.co
  • Element: a widget on a Page such as Text, Image, Button, etc. Carrd has about 18 different types of elements. Each element has several properties that can be configured to change its behavior and look-and-feel. When rendering on browsers, each element is technically a mapping to a set of HTML elements and CSS styles.

Implementation Components

Yeah, that’s exactly it. However, to make it a full-blown product for non-developer users, we’ll need a couple of other components. In a word, we’ll need:

  • Components Library and Compiler: together define what elements are available for uses, how they are compiled into HTML/CSS/JS (or other presentations if you’re building for platforms other than web).
  • Builder: a graphical user interface application that allows users to pull elements together visually, instead of writing code.
  • Serializer: a service that writes what users built visually with Builder into disks (database, text files, etc) and vice versa.
  • Publisher: a service that publishes a site’s output along with its configurations to a hosting or distribution channel (Amazon S3, Vercel, etc).
  • Dashboard: the UI for managing one’s account, sites, and stuff other than building.
  • Homepage: the website itself, including its logo, landing page, signup page, etc.

--

--

Software Engineer. Documenting my journey at 𝐩𝐡𝐮𝐜𝐭𝐦𝟗𝟕.𝐜𝐨𝐦

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Minh-Phuc Tran

Software Engineer. Documenting my journey at 𝐩𝐡𝐮𝐜𝐭𝐦𝟗𝟕.𝐜𝐨𝐦