Challenge Overview
Challenge Overview
We are starting a micro-frontend based approach for Topcoder apps. Your task in this challenge is to implement the main (frame) app using the provided designs, a demo micro app and document how to develop other micro apps in the future.
Background
Micro-frontends are “techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently” and we will be using this approach for developing various Topcoder apps.
Benefits that we expect from the micro-frontends approach are:
-
Stop redeveloping things like menus and headers and footers and other frame components with each app
-
Improve code reuse
-
Improve or at least maintain the ability to develop several apps in parallel
-
Improve standardization
Tech Stack
-
Single SPA - https://single-spa.js.org
-
Javascript
Assets
Application designs are posted in challenge forums.
Task Detail
Your task in this challenge is to:
-
Implement the parent ‘frame’ app - that handles the overall layout
-
Implement a demo micro app
Both desktop and mobile layouts are in scope - designs are provided in the forums. Parent app should handle user authentication, using the standard Topcoder accounts app - https://github.com/appirio-tech/accounts-app
Contents of the demo micro app are not too important - but you need to demonstrate that the child app is independent of the main ‘frame’ app so that they can be deployed independently and developers don’t need to update any code/config when deploying the app to the main ‘frame’ app. You should also demonstrate how to add/remove an app from the main frame (please document how to add react and angular apps).
Clean documentation of the frame and child app is crucial for future development - we don’t want each new app developer to spend a lot of time figuring out how to get started implementing a new child app - make sure the README for both apps contains all the details necessary to quickly bootstrap a new app - including local deployment of the child app (without the frame app) and integrating child app into the frame.
Submission Guidelines
-
Submit the full source code for parent and child app and their documentation