...loading...
Enginsight
Modular Single Page Application
React
MUI
Git
Typescript
Webpack
Cypress
enginsight GmbH was looking for a new approach for its complex user interface, with a main 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 deals with highly complex data and must enable its users to react quickly and in a targeted manner.
Design
(For legal reasons, no actual images of the frontend can be shown here. Thank you for your understanding.)
Implementation
Since the existing user interface, as a "mega-app," already exhibits disadvantages in terms of development and speed, I decided to implement the Webpack module federation concept. Following this principle, I developed a login app which, after successful login, first loads the container app, into which each subroute is then dynamically inserted as an independent SPA app. For the user interface, I chose React with Material UI (mui) as the tech stack. This allowed the main structure of the app(s) to be built quickly and customized using themes.
Product Owner
I structured the development planning, implementation, and, most importantly, the traceability of the development steps using well-thought-out tickets and milestones. This required me to understand the data structure of the existing API (which lacked documentation). My only basic requirement was a Swagger configuration based on the OpenAPI standard and its extensions to ensure a clear project structure.
Tech Stack
The focus should be on an extensible and, above all, maintainable structure. For this, I chose React with TypeScript. I used ReactQuery for state management and flawlessly generated all communication to the API using openapi-codegen and api-swagger. To ensure a quick initial implementation, I opted for MUI components, which were subsequently adapted to the corporate identity via a theme. Webpack served as the bundler. Every route of the app