Vybero: helping customers choose the right product
We've been developing an online advisor called Vybero in cooperation with a Brno based company called Procontent s.r.o. Vybero helps customers decide which product best suits their needs. It evaluates each product by parameters rather than price. Furthermore, Vybero offers lots of tips on how to select the right product and explains the types of goods and their usage. Most of the product parameters are described in detail, so even an unskilled customer can understand their value or importance.
Development
Vybero is composed of three parts, or applications, if you will. Two of these applications are front-end web applications. One application helps the customers to choose the right product, while the other (so-called back-office) allows editors to manage the Vybero content. Using the back-office application, an editor can manage products, create filters, write articles, etc. The last part is a back-end application responsible for data storage, product evaluation, and creating a communication channel between applications. All in all, Vybero is a complex system where data can be modified by one application, but displayed by another.
Search Engine Optimization
One of the key requirements for the Vybero front-end application is precise Search Engine Optimization (SEO). The reason for this is that we want Vybero to be shown among the top search engine results. In order to achieve this, we have implemented SEO best practices, e.g. semantic HTML tags.
Vybero has a set of rules defining which pages of the application should be analyzed by web crawlers and which should not. Because Vybero is a Single Page Application (SPA), it is not crawlable by web crawlers by default. Therefore, previews of shared links on social platforms are not possible and search engines can't index Vybero at all. To fix this issue, we have integrated server-side rendering (SSR) to the Vybero application. The requested web page is first pre-rendered by the server, then it runs as SPA in the browser.
Custom pages
Each product category, e.g. washing machines, has its own web page. Vybero editors are able to create custom pages for each category based on current filtering. As a result, Vybero can display more precise and detailed information based on the customer's preferences. Editors can also create a custom card containing short articles or tables featuring products' parameters and their evaluations. These cards can help divide parameters into groups and thoroughly explain them.
Technologies
Both front-end applications are built using the Angular framework together with TypeScript. They use Firebase services for both editor authentication and data storage. Server-side rendering is implemented by Express and Angular Universal packages. The most important technologies and services are listed below:
Angular 2+
TypeScript
RxJS
NgRx
Firebase Authentication
Firebase Cloud Functions
Cloud Storage
Cloud Run
Express + Angular Universal
Angular Material
The backend application is implemented in the Go programming language. The web server used as an API for both front-end applications is managed by the Echo package and our database uses Elasticsearch. We opted for a document database because Vybero contains lots of products with various parameters. The most important technologies are listed below:
Go
Echo
Elasticsearch
Firebase Authentication
App Engine
Project management (Vybero’s journey to agile)
From a process point of view, this project has gone through a significant transformation. At the beginning, it was managed in a non-agile way (I am sure you have heard about the so-called Waterfall model). We felt, however, that there was a lot of space for improvement and so we introduced scrum to our main stakeholder Jakub. With his help, we set up clear and maintainable processes for this project. During the transformation, the most important ceremonies were daily standups and retrospectives which helped us reflect and improve with each iteration and eventually become an actual scrum team. Jakub is currently in the role of Product Owner - he is in charge of introducing and prioritizing new features, as well as sharing the project mission and vision with us. This helps us stay on the same page and, thanks to daily communications, we are able to overcome unforeseen problems in a much more effective way than before.
From our very first consultation onwards, it was clear FlowUp's technical knowledge is remarkable. The team was good at listening and understanding our problems and preferences but was also able to recommend changes with sufficient emphasis when necessary - as with our original waterfall approach, for instance. I appreciate the team's critical thinking, as well as their flexibility and response times. And they're likable people with a very human approach, too.
Jakub HavelkaChief Executive Officer | Procontent s.r.o.
Contact us using this form and we'll answer you via email ASAP. If you leave us your number in the message, we'll call you back. Looking forward to hearing from you!
