Access Requests Cut from 3 Days to 30 Minutes

The project was organized as a collection of small, individual front-end parts called micro-frontends, all stored together in a single Nx monorepo with Feature-Sliced Design. Each team was responsible for their own part and could update it separately. Those parts were combined using Single-SPA, built with React and TypeScript and used the bank's internal UI components. Server-Side Rendering (SSR) helped the app load faster initially, and React Context was used to share information between different parts of the system.

The project provided micro-front-end components for project management, users’ administration and access requests, featuring an automated process of approving roles’ requests that shortened the approval time from several days to minutes. The project was implemented in compliance with FSD component architecture, included Sentry and Pino for logging and error monitoring and developed CI/CD pipelines for deploying MFE independently.

Within the access request workflow module, all user access was controlled by role-based access control. Audit trails of user actions were maintained via Sentry and Pino, which allowed for tracking of all actions and when they occurred. In addition, the logging was multi-layered, which allowed for fast troubleshooting of errors. Finally, the system has been designed to meet the internal security standards.

Nx was an integrated build management tool that allowed all projects and builds to exist within a single repository. Continuous integration was accomplished using both GitHub and GitLab, which provided automated builds where all code moves from commit to an in-production build without any manual intervention. Kubernetes performed the containerized executions of builds. Webpack created the final output files that are delivered by a web browser. This solution allowed micro-frontend projects to build and deploy independently.