In the available back-office, once connected to the Notion account, all the Workspaces you have authorized will be displayed, it will then be possible to retrieve the content of each Workspace / Page as well as the type of block to then update the color, the style or the font. Everything is managed through Context, this style is then returned to our Database which will store it to return a static site corresponding to the back-office.

Selfer is easy to use, to use it, you just have to create a page in your Workspace, enter the content you want in the Notion blocks (callout, image, text). We then retrieve these elements via the Notion API, we just have to edit its content via our App, which will then propose to go live and put online its static site.

For the back-end, to create and update the content, we used Symfony and a MySQL database. Different routes exist to communicate with the front-end. To update the DB, the data returned as parameters by the front-end are retrieved, processed (to check that there are no elements we don't want to return) and then sent to the database.

As for the front end, we used React with TypeScript. TypeScript seemed to be essential, especially in our case, since we were going to manipulate several types of content and return them. The retrieval of information from the back end is done by calling on the different routes created. To store and manipulate these variables properly, we have setups of different contexts that we update through several components.