How to build a website builder
<p>A website for building websites. Sounds easy, right?</p>
<p>It sure is if scoped right and if you have a great guide to break it down for you. Luckily, you’re reading a guide to build just that written by someone who built a website builder from scratch. By the end of this tutorial, you’ll be able to build a simple website builder (<a href="https://website-builder-demo.vercel.app/" rel="noopener ugc nofollow" target="_blank">demo</a>, <a href="https://github.com/andyzg/WebsiteBuilderDemo" rel="noopener ugc nofollow" target="_blank">code</a>). You’ll also learn how to think through decisions in the context of building a product.</p>
<h2>MVP Requirements</h2>
<p>Let’s break down the use cases of our website builder MVP:</p>
<ul>
<li>A user can view a read-only version of the website they built</li>
<li>A user can add new sections to their website</li>
<li>A user can edit the text content of their website</li>
<li>A user can view which mode they’re in (editing vs read-only)</li>
<li>A user can toggle between read-only and edit modes for their website</li>
</ul>
<p>There’s a million more ways to enrich our website builder but let’s stick with the basics. It should take 20 minutes and will require beginner knowledge in JavaScript, React and CSS.</p>
<h2>Out of scope</h2>
<p>The danger in product development is trying to build too much and not launching early enough. Let’s define what will be cut out of scope from our MVP so that you can finish this tutorial in 20 minutes:</p>
<ul>
<li>Styling the content</li>
<li>Server-side component</li>
<li>Database and data storage</li>
<li>Mobile-friendly</li>
</ul>
<p>The neat thing about this MVP is that it’ll be easy to deploy the MVP live as a client-side app. In other words, launch first then iterate later.</p>
<h1>1. Client-side design</h1>
<p>For the client-side app, keep it simple and organized. You’ll have a <code>Website</code> component that takes in two parameters: <code>mode</code> and <code>websiteData</code>. The <code>mode</code> will define whether the website is being read or edited. The <code>websiteData</code> will define the content of the website.</p>
<p><a href="https://andyzhang.medium.com/how-to-build-a-website-builder-aead35ca5310">Read More</a></p>