I got married in September. We invited circa 120 guests and the fastest way to update them with complete and up to date information was to refer them to a website.
So I quickly created a wedding web. Requirements were: Texts on the web must be easily editable by the bride, web must be kin of representable, web should be carried in the design of the wedding, web must be at least bilingual (several guests were from abroad), web must be responsive (I know our friends, and some will look for the actual destination just on the way there) and It must be done without huge effort.
Backend
Web was built on PayloadCMS, a headless content management system. It allows quickly define entities like Menu and Page, the quickly add multilingual properties like title and the page content. All is configured in a programmer way by creating of configuration objects in typescript language. These objects describe entity attributes, their type, validation rules and even a input they will be represented by in the administration.
Programmer just sets there is a Page entity, that it has text field title and wysiwyg field for content. PayloadCMS has it's own content editor, which can be extended beyond ordinary elements like paragraph, bold text, italic text etc. It's called blocks. You define your own blocks, described with same configuration scheme like entities, that you can then add into the page content.
PayloadCMS stores all data in document database MongoDB. All the page data including the output of the wysiwyg editor is just a tree of objects in JSON format.
Frontend
The web itself is rendered by tiny Next.js app. It fetches the page data from PayloadCMS over GraphQL and renders them using server side React.
The JSON object tree with wysiwyg created content is very convenient to render using recursive React components. Each defined block corresponds to a React component and the block data are just mapped to the component properties.
