Micro-frontend and microservice solutions

Multiple projects for a client, that spanned over a year. It included development custom micro-frontend components and supporting microservices.

This component was meant for editing and visualization of json configurations.

Visualization mode includes, showing multi-level JSON objects with possibility of collapsing and expanding each separately.

Editor mode offers editing forms for each property separately, as well as global JSON editing functionality like, adding new properties, removing existing, saving and rolling back changes.

Front End solution included a React library of components, linked to the rest of the project via Module Federation, as well as distributed externally (to the other projects within organisation) via npm. Internal state was managed using MobX.

Components:

Localized string - a wrapper over i18n library, that adds additional features, like real-time editing, custom styles, etc.

TranslationsEditor - Translations editing form, that allows addition of new, amendments over and removal of existing translations, in single or bulk edit modes.

Dashboard - Visualization component, in form of table to search through existing translations.

Once mentioned components were developed and deployed, follow up project was supposed to generalize them and reuse in multiple places, for management of different entities.

On the Back End, simple REST services, with CRUD endpoints, were developed, in order to store managed entities, like translations, projects and others. Database was MongoDB. Docker was used for the deployment.

The project components were hosted in private gitlab repositories, with custom pipelines, that i had to develop.

Backend pipeline consisted of multiple steps:

build - building docker image and pushing it to gitlab image repository,

deploy - deploying the latest image to the VPS.

Frontend consisted of multiple steps:

build - building the library and frontend project build, for the distribution and deployment, respectively,

distribution - uploading library to npm,

release - bundling fronted app with the latest library version.