Microfrontend system in Angular, VueJS, ReactJS (Module federation)

Job ID: 39156954

Budget: $10 – $75 USD

Overview
We need a frontend developer to build a simple microfrontend system using module (or native) federation. The system consists of a shell Angular 19 application that hosts VueJS and ReactJS microfrontends. The goal is to allow seamless switching between the different microfrontends while maintaining shared state and navigation.


Requirements

1. Angular 19 Shell Application
- Acts as the main container for the microfrontend system.
- Contains a top navigation bar with three menu items:
- "Home" - opens the Angular HomeComponent
- A VueJS microfrontend
- A ReactJS microfrontend
- Clicking a menu item should switch the view to the corresponding microfrontend.
- Stores user session data in `localStorage` upon loading (the data can be hardcoded)

```json
{
"user": "John Doe",
"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30"
}
```
- Shares state with microfrontends, such as a `theme` (dropdown in Angular) setting that is passed to VueJS and ReactJS microfrontends. Changing the theme in Angular should change the colors in Vue and React microfrontends.


2. VueJS Microfrontend
- Built using VueJS 3.5.13 (latest)
- Exposes a shared state to the Angular app (e.g., a `useCount` button that updates a counter and syncs with the Angular shell).
- Must integrate seamlessly with the Angular shell and respect its shared state (aka receiving the theme setting from Angular).

3. ReactJS Microfrontend
- Built using React 19.0 (latest)
- Exposes a shared state to the Angular app (e.g., a `useCount` button similar to the VueJS microfrontend).
- Must integrate seamlessly with the Angular shell and respect its shared state (aka receiving the theme setting from Angular).


Technical Requirements
- All applications must use Vite for fast development and build processes.
- No shared code between the applications - each microfrontend must reside in its own directory and be self-contained.
- Module Federation (or native federation) should be used for microfrontend integration.
- The system has to be run locally with just doing something like an npm run start on each of the apps (or ng serve) setup.


Deliverables:
- A public GitHub repository (which will later be transferred to my account) with the Angular shell and two microfrontend applications.
- A README file with setup instructions.
Related categories: JavaScript Node.js React.js Vue.js Angular