Challenge Overview
1. Context:
PROJECT CONTEXT
Develop a Proof of Concept (PoC) to demonstrate a working concept of a global navigation app offering a plug and play framework for conforming microapps
2. Expected Outcome:
-
Seamless User Experience upon the click of menu-items and submenus-items while transitioning between micro apps
-
Secure handling of CORS and data of microapps belonging to different domains (GlobalNavApp: app1.t-mobile.com and app2.microsoft.com) in the same browser window/tab
-
Appropriate handling of user session and AuthN handshakes (OKTA) for 2 different microapps active in the same browser window/tab
-
Ease of microapp integration (plug and play)
3. Challenge Details
INDIVIDUAL REQUIREMENTS
In this challenge, you should create a PoC application to demonstrate the micro-frontend architecture.
-
User visits Global navigation app, App offers AuthN page. User Authenticates and returns to the Global Navigation App (OIDC protocol)
-
User lands on the landing page with a header, footer and a left side menu. Menu should be determined based on user’s AuthZ
-
User clicks on one of the menu items to see that the landing page is now replaced with the UI screens of microapp-1
-
The framework should offer a mechanism to pass along the “context”, from the state before the click to the state after the click (from micropp-1 to microapp-2)
-
Microapp-1 should also return its sub-menu-items which should be appended to the left side menu under microapp-1-menu-item
-
Micorapp-1 may also render a URL (apart from left menu) in its space (apart from header, footer and left menu) which helps the user navigate to microapp-2 and so on recursively
-
Develop a well-defined configurable contract that Global nav app exposes and to which a microapp must adhere
-
Each microapp (deployable) should be running in its own dedicated container
What is a Conforming microapp?
-
A microapp that adheres to a contract defined and mandated by Global navigation app. A microapp serves UI pages by hitting APIs behind the scenes
What does “Menu should be determined based on user’s AuthZ” mean?
-
This means suppose there are 5 microApps apart from global navigation app, when user-1 logs in, user-1 has access only to 3 of 5 microapps and hence can only see 3 in the menu
-
These are also called Level-1 Authorizations
What is “Context”?
-
User’s AuthN tokens and AuthZ info.
-
Radio button selections (or any other elements on the page) in microapp-1 that should be passed along as queryParams to microapp-2,
-
other information that the developer of microapp-1 may want to pass along to microapp-2
What does “Recursive” mean?
-
In this context, recursive means, microapp-1 could have a URL (apart from left menu) in its space (apart from header, footer and left menu) which helps the user navigate to microapp-2 and so on
In the PoC, you should create the following apps:
-
Global Nav App
-
Microapp1
-
Microapp2
-
REST API - to be consumed by the global nav app, microapp1, and microapp2
All of them should run in their own containers, and it should demonstrate all the requirements above properly. The UI should be clean and professional.
You may check this library to see if it’s helpful: (We are open for all possible solutions)
TECHNOLOGY STACK
-
Docker
-
Angular 9
-
Node.js 12
-
Okta
Final Deliverables
-
Source Code
-
Deployment and Verification Guide (with clear explanation of how each requirement is addressed)