Architecture Cleanup: OAuth & Unified UI

Note: due to NDA I cannot show the real UI or reveal the project name

• Employer: NTT Data
• Role:: Frontend Solutions Architect
• Duration: 9 months
• Technologies: Angular, Kubernetes, OAuth

Project Overview

This was a web application that allowed employees to book their office desk and for system administrators to: import and export the office map data, monitor the real time usage of each desk, view statistics about each office building, floor and meeting rooms, perform audit checks and configure role based access.

The app was a web based Single Page Application written in Angular 16, using REST APIs and a microservice based architecture for the backend. The whole system was deployed automatically using CI/CD pipelines on a Kubernetes cluster hosted on AWS.

The Problems

The app went under many revisions during its development, technical debt accumulated, many inconsistencies in the UI were showing up because developers started using multiple component libraries, and last but not least, the authentication system would periodically break because of its suboptimal implementation that required manual interventions by the operations team.

The Solutions

I was brought in to the project to help the team solve these long-standing issues and improve their work efficiency. My job consisted in designing the architectural solutions and implementing them. During its 9 months duration I heavily refactored the UI code, removed all the redundant UI libraries and unified the styling and look and feel into a single coherent component library.

To solve the periodic issue with the authorization system, I researched how the OAuth and OpenId Connect protocols worked, I then designed and implemented an OAuth client in the application and configured it to use the company’s Active Directory server so that employees could login using Single Sign-on, I also updated the infrastructure and compiler configurations to improve their efficiency.

Results & Conclusion

The unified component library and the proper implementation of the OAuth protocol came with multiple advantages:

• The initial loading time was cut by almost 50%
• The look & feel felt more curated and professional
• the UI responsiveness and animations significantly improved on low-end devices
• The increased reliability of the auth system avoided any future downtime
• Onboarding of junior engineers became easier and quicker (days vs weeks)

This was an interesting project that taught me the importance of properly using industry standards, how to use them in a web application and the importance of a coherent and unified components library, both solutions significantly improved the ease of maintaining the application.

---