Monizze
Helping Monizze in implementing in a new SPA front-end in Vue3 and Typescript, while also training and coaching their internal team in Vue.js 3 and Typescript.
The Client
Monizze is a Belgian FinTech that maximizes people’s purchasing power with simple digital solutions. With inflation on the rise, the looming threat of a global recession, and people’s needs for more flexibility, companies of all sizes are rethinking their HR and compensation policies. That’s where Monizze comes in. They take your regular extra-legal advantages and package them into simple, no-nonsense solutions: with zero administrative burden and a ton of value
Our Services
Vue.js 3 SPA Frontend development
Training/Coaching
The Context
Monizze wanted to develop, in co-creation with a HR partner, a new platform that enables employers to offer new benefits to their employees, such as bikes or mobile phones.
Employers had to be able to connect to the application through the partner’s various authentication systems (OAuth). Using the application, the partner’s customers should be able to select merchants, configure appropriate policies, legal configurations, budgets for their employees.
Employees should be able to access benefit catalogues and also connect to external merchant sites via authentication systems to purchase benefits that fit their budget, or with the possibility to make top-up payments.
Additionally, the application should synchronize all kind of information with the partner to enable him to manage the payroll. In short provide and streamline numerous functionalities.
Strategy
The Challenges
For this project, Monizze decided to develop the front-end in a SPA model with Vue.js.
The internal team at Monizze had a lot of experience in developing with PHP / Laravel, in a “Full Stack” approach. This was however the first large scale SPA fully handled by the team, that had to acquire the competency to develop and maintain the application independently.
The mission’s objective was to help Monizze with the frontend development part, to configure and develop all the necessary tools for the SPA (in collaboration with the internal team). Another goal was to train and coach the internal team making sure they acquired sufficient knowledge of Vue.js 3 and Typescript to independently develop in the future.
We made the decision to collaborate with the Mirahi team on the project, as they offered a rare combination of services: architecture set-up, and hands-on development of 2 applications, but at the same time a custom-made training for the internal team with Vue.js 3, TypeScript and Nuxt 3 technologies.
)
Sébastien Couturiaux, Monizze
Chief Technology & Innovation Officer
Sébastien Couturiaux, Monizze
Chief Technology & Innovation Officer
Scope
The Solution
In order to give the Monizze team the necessary knowledge to develop the application, Mirahi provided a three-days custom-made training in Vue.js 3, Typescript and Nuxt 3.
The Mirahi team assisted in developing from scratch two applications (the main front-end application and an administration front-end) in Vue.js, as well as providing input on product definition and UX scope. We led the frontend side of the collaboration between the backend and frontend team to develop the backend API.
To facilitate code sharing between the applications, we created a monorepo with the 2 applications we made before, and several shared packages with the API code, the translations (French, Dutch, English), the styles (bootstrap), and a library of components.
For the project: Storybook was used to document the library of components, Vitest for the unit test. This was the most efficient way to ensure the quality and usage of components within the application.
Cypress ensured the end-to-end testing of the application. This is a very powerful test tool, that enabled us to test the whole application and to ensure that the application didn’t crash after major or minor modifications.
The CI/CD of the GitLab was set up on the project, and the workflow was launched so that each team member could commit and merge on the repository. In each environment, all unit tests, end-to-end tests, application building, and deployments were executed.
Technologies used: Vue.js 3 with composition API, TypeScript, Vue-i18n, Vite, Eslint, Bootstrap, Vitest, Testing Library, Cypress, Turborepo, Vue-i18n, Storybook, Laravel, OAuth, SAML, Sketch.
Mirahi proved to be an honest and reliable partner, putting the interests of Monizze and the project team first. They advised on the choice of the modern front-end technology stack, Vue.js 3 and TypeScript, while emphasizing the importance of collaborative workflows with Storybook, Cypress and GitLab. Our team appreciated the professionalism in delivery, but also the attitude of sharing the knowledge and coaching along the road.
Sébastien Couturiaux, Monizze
Chief Technology & Innovation Officer
Sébastien Couturiaux, Monizze
Chief Technology & Innovation Officer
Structure
The Results
After eight months, the applications are in production, connected to multiple authentication systems from various partners, and available in three languages. The Monizze team can now independently write unit tests and end-to-end tests in Typescript and Vue.js, create components, and document those components in a storybook.
The Monizze team is ready to start new projects in Vue.js and Typescript on their own.
Key numbers
3 days of training Vue.js/Typescript/Nuxt
2 apps (customer, applications), 4 packages (API, translations, bootstrap, and library of components) in 1 Monorepo
21 components (documented in a Storybook)
40 tests end-to-end in Cypress
57 unit tests
The project went live and we are already iterating on the feedback of our partner, their customers and the Monizze project team.
Sébastien Couturiaux, Monizze
Chief Technology & Innovation Officer
Sébastien Couturiaux, Monizze
Chief Technology & Innovation Officer
An idea to explore?
Drop us a line