What is this page?

This page is an active project of mine, a CMS written with React and Nextjs. It was originally inspired by the need of non technical people to visualize and change the appearance of web pages. However, I was lacking the technical knowledge on how to tackle something like that, until I started learning React. I learnt the magic of React.createElement and in my mind, I had it.

So how is this page created? All the things you see here are normal React components, like the ones you are probably using for your projects, that are dynamically imported and rendered.

For the time being, there are 2 types of components: components that cannot have children, and components that can have children.

Things are pretty straight forward, we have a list of components and some of them can contain other components. That creates a tree like structure that represents a page, which is recursively rendered to create the page you see right now.

What are the possible uses for this tool?

The possibilities are endless. You might create a simple blog like this one, or a full fledge e-commerce website. All it matters is what components you use or you're willing to use/write.

In order to have the ability to scale, I've expanded the pages to have a layout. Layouts are also pages, or at least use the same structure to render. That helps us avoid rewriting the layout for each page, but also gives us the ability to have different layouts for different pages. It also helps with performance, since only the content is rendered while navigating, if the layout is the same.

Another thing to help with scaling, is page templating and automatic page creation. This is the next step for this tool. I have already written page templating, which is nothing more than loading a Json and mapping it to a page. Running that map will edit the page components to the values of the Json. This opens the doors for huge site expansion without any code tinkering or technical knowledge, which again, is the primary focus of this tool.

You might ask, this page looks pretty basic, is that a limitation of your approach?

The answer is no. The reason that this page looks so basic, is the simple fact that I've decided not to use a components library and to create my own basic components. This is because the reason behind this project is not to create a super fancy website, but to create the mechanism that helps you build your website, with whatever components you want.

What are the limitations of this approach?

In order to have good SEO and speed, I've used Nextjs to generate a static website. Before I migrated to Nextjs, the pages would have to show some kind of loader, and the page would then render, potentially causing bad CLS score.

Another major limitation, is the need for a place to store and retrieve the pages. For this page, I have set a .Net Core API in a server to do this, however anything could be used (eg Firebase).

Sounds like a cool project, where can I check it out?

There, you will also find how you can see a live demo of the editor (in this website!).