Helping Barion with NextJS-based, low-code website development
Creating easy-to-manage, business-friendly website for one of the most successful payment providers in the Hungarian fintech space
Redesigned, cost-efficiently and easily manageable website
As Barion is one of the most successful payment providers in the Hungarian fintech space, they wanted a new, redesigned website which does not require their precious engineering resources.
By enabling the business-side workforce to easily manage and modify a website, processes become much quicker while developers can concentrate on more professional tasks, not wasting their great knowledge on correcting typos by coding.
Together with Barion we’ve been looking for the perfect toolkit to meet the above mentioned requirements and we decided to choose a low-code platform.
We helped the company with NextJS based website development, integrated with a recent Builder.io lowcode & headless CMS system.
Although the use of the tool requires actual coding and developer skills, it takes way less time to create a website with its help, not even mentioning the easy maintenance.
Building and optimising digital experiences for any tech stack with full control, visually.
Builder was founded in 2018; the low-code tool delivers end-to-end digital experience without relying too much on developers. One of its most important features is that it has no burned-in texts, therefore everything can be modified dynamically. Builder also connects low-code technology with headless CMS systems which is unparallelled in the market.
Although being less flexible and UI-focused than Webflow, Builder also has some great built-in analytic tools (e.g. heatmaps, click maps, visitor tracker, etc.), which are extremely useful to measure your website’s traffic, while it also supports A/B testing (performance comparison).
Builder provides free forum support too: besides having a great developer community willing to help each other, Builder colleagues also try to answer every arising question and help users fix errors they may find within the tool. The platform offers many custom plugins for users, such as the Shopify integration: it is possible to import all products from Shopify with just a few clicks. Builder also provides easy-to-use templates for developers who don't want to build websites from scratch. If you’re further interested in low-code tools and specifically Builder.io, check out our blog post on the topic below!
Uploading fully custom components to the visual editor, created from code
What makes it worth using Builder.io amongst all the headless CMS systems is that you can upload your own custom components to the platform.
Builder’s visual editor contains default text, image, pattern, carousel and other components which are difficult to customise in general. Nevertheless, users can create fully custom components from code and upload them to the visual editor, where they can be tailored based on certain properties.
This is an amazing feature for developers and currently there’s no tool on the market supporting this functionality. It is also worth mentioning that the feature supports several programming languages, including React, Gatsby, NextJS, Svelte or Angular, just to mention a few; feel free to check out all the available integrations below!
Reusing components without hard-coding values
Barion’s design consisted of many similar components, repetitive styles with slight differences and several icons with minor changes. Coding these components separately and including all the minor changes in each and every one of them would have taken a tremendous amount of time and effort.
This development challenge has been solved with data models and the Symbol feature.The drag-and-drop Symbol feature enables us to reuse components without burning in (hard-coding) values. This allows us to plug in values based on input fields, from data models we have previously created.
In case of symbols, the input fields are dynamically connected to the components. For ease of understanding, let us assume that the Symbol feature is a “skeleton” which consists of a title, a description, an image, a colour and a border. The things users type in the input fields will be automatically connected to the component and Builder will display these parameters accordingly.
No burned-in strings, just data models
Headless CMS systems are basically raw databases, but since Builder is also a low-code platform one can create and upload custom programmed codes (e.g. buttons, components, forms) to Builder’s visual editor and use these custom codes as they are.
This means that even those users who are non-professional developers can modify the codes. As Builder stores headless CMS data, it’s easier to connect it to the website than connecting with regular databases. The reason why using headless CMS is great is because users don’t have to push the modified versions of their website to GitHub, as the code can be modified and updated instantly within the Builder platform.
We chose Builder for the project because, although Barion has an expert team of software engineers, they are working on the state-of-the-art payment platform. If there’s an alignment issue, an outdated piece content, or a typo on the website and the team needs to fix it from code, it can be a big hassle and a waste of senior capacity, so that is the reason why the code hasn’t any burned-in values.
The solution is to have all data models stored in a database so one can always include or retrieve only the correct data model. There are no burned-in values, everything can be modified from the Headless CMS.
There is the Builder.io interface and within that, there is the application that reaches back to the parent (Builder.io), and retrieves the data from there. This way users don't need to modify the code, they just need to retrieve the relevant data from the Headless CMS. This also allows the user interface itself and the content on the site to be separated, so colleagues can work in parallel without disturbing each other's work. Not to mention that it allows the well-known programming principle - separation of concerns - to be implemented.
Challenges arise but Builder is here for the rescue
Based on custom parameters, one can launch different websites as well. In our case, we set 5 different languages for the home page by specifying 5 different languages in the code, and Builder generated the website’s home page in all those 5 languages, although this solution brought plenty of challenges down the road.
We started to work on the website for Barion in just one language and we decided to do the localisation by the end of the project. At this point, we had 165 data models in English and we needed to localise each and every one of them. Builder has its own built-in localisation solution, but as we had to include 5 different languages, the story became a bit more complicated. For a quick count, let’s suppose that each of the 165 data models had 5 fields (image, text, etc.) and we needed to localise all 5 fields in 5 separate languages.
This means 165*5*5=4125 fields into which we would have had to manually copy the original value.The platform didn't support inserting the originally not localised field into the newly localised field - this way we would have lost our data because of field overwriting. We retrieved all our data models from API and batched them into the appropriate json structure using a script. This script ran in about 5 minutes and saved us a week of manual work.
Together with Barion, we’ve been looking for a tool which does not require their precious engineering resources and enables them to easily manage their new, redesigned website.
We decided to use Builder’s low-code platform and we helped the company with NextJS based website development, integrated with a recent Builder.io lowcode & headless CMS system. We highly recommend using Builder as the tool facilitates the easy modification and maintenance of a website while having several useful features: one can upload and reuse custom components, manage the content without modifying the code or conveniently localise the language.
Although Builder has its teething problems like the so far beta-stage HTML and Figma exporting, we truly believe that the tool has a bright future ahead.
Do you like what you’ve just read? We would be happy to create your very own website in Builder too! Feel free to reach out to us with your questions and ideas!
BARION
“ff.next has been a great partner in building our new website. Working together was super smooth and we always felt that both Kristóf and Marci took ownership of their work. Even though we decided to use a CMS that is new on the market, the guys were very quick to learn and adapt it to our needs.”
