Modular Single Page Application

enginsight GmbH was looking for a new approach to their complex user interface with a focus on: better usability, more speed, better scalability and a wider range of functions.

Brief description

As a security service provider for digital infrastructures, enginsight GmbH is an up-and-coming company that operates with highly complex data and must enable its users to react quickly and purposefully.

Design

(for legal reasons, no real images of the frontend may be shown here. I ask for your understanding)

The design of the menus and the structure should be identical to the existing Ui. The design of the routes behind each menu item should be similar, but more functional than the existing Ui. Since almost every subroute starts with an overview of the corresponding data it displays and this data should be filtered and sorted according to various parameters, I designed a reusable “data overview component” that uses a search bar to create filters with various associated filter sets. Furthermore, a concatenation of sorts can be created. Each search and sorting process was represented by a chip which could then be changed, moved or deleted.

Implementation

Since the existing user interface as a “mega app” already shows the disadvantages in development and speed, I decided to apply the concept of webpack module federation. Based on this principle, I developed a login app that first loads the container app after a successful login, into which each subroute is then dynamically hooked as an independent SPA app. I chose React with Material Ui (mui) as the tech stack for the user interface. This allowed the main structure of the app(s) to be set up quickly and customized using a theme.

Skills

• Figma
• Typescript
• esLint
• React
• React-Query
• React-i18next
• Webpack + Module Federation
• OpenAPI + OpenAPI Codegen
• Lerna
• Husky
• Cypress
• Sketchbook
• Gitlab + Gitlab-Runner

Tags

React, Webpack, Lerna, Husky, Cypress, SPA, load-balancing, Codegen, OpenApi, Hooks, i18next, internationalisation, performance, reimplementation, modular development, Gitlab, gitlab-runner