Soliman Al Halaby Creative Developer

Selfer App

With Valentin ,Robin ,Leo
Back-end developer
React JS

Selfer is a web app designed using React JS for the front-end and Symfony for the back-end. This Web App is a kind of CMS based on the Notion API. Via Selfer it is possible to generate a static site. A back-office is set up to edit / update the content that will be updated directly on the site. This Web App has been realized in a 10 days project.<br/>We are still working on Selfer and plan to implement different features in the future.

Selfer App Hero Image

01 /

Easy and customizable



The Selfer Web App is very easy to use and very scalable.

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.

Fullwith image
Project Image
Project Image

02 /

Code structure



A code
fragmented in 2 parts

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.

Fullwith image

More projects

Soliman Al Halaby©
All rights reserved

Designed by


my resume

Arrow up
Learn more