Frontend architecture case study:
school management system part 2

This is the second part of the School Management System series. You can read the first part here

What we will do

In this article, I'm implementing the first part of the school management system, which is the shell 🐚.

This is also the most heavy part. The shell is responsible for assembling all the different microfrontends and has the following responsibilities:

• Routing
• Typings
• events
• feature flags
• E2E tests
• i18n
• Dependency injector
• authentication
• feature flags
• Analytics
• Loading microfrontends
• Design System

Typings

The shell app will provide typings to be loaded in various microfrontends, to typecheck if an event is available to be dispatched for other frontends to listen to. This establishes a contract between them all.

Dependency injector

I want to make sure the microfrontend is using available resources and functionalities that the shell provides. The main goal is to ensure uniformity where it is needed.

Feature flags are one of the most important examples, as it has to load an external service with configurations to get the available flags and will pass the implementation to other microfrontends.

i18n

We share the same locale across the app. This setting will be available through local storage.