https://github.com/u4aew/module-federation-playground
Module federation
https://github.com/u4aew/module-federation-playground
antd event-bus microfrontend module-federation react yarn-workspaces
Last synced: 6 months ago
JSON representation
Module federation
- Host: GitHub
- URL: https://github.com/u4aew/module-federation-playground
- Owner: u4aew
- Created: 2022-11-26T04:23:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-06T19:32:17.000Z (over 1 year ago)
- Last Synced: 2025-07-25T03:38:33.782Z (6 months ago)
- Topics: antd, event-bus, microfrontend, module-federation, react, yarn-workspaces
- Language: TypeScript
- Homepage: https://microfrontend.fancyapp.site/
- Size: 4.25 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Banking Application with Module Federation
This banking application is a showcase of Module Federation, a cutting-edge feature from Webpack 5, which allows for a scalable, flexible microfrontend architecture. Designed specifically for the finance sector, this application is divided into several independent modules, each with its unique functionality and managed state.
More details in this [article](https://dev.to/u4aew/creating-a-web-application-using-micro-frontends-and-module-federation-11kk).
## Application Sections:
**Host App**: The central hub integrating all modules.
***Card App***: Focuses on user card functionalities.
**Transactions App**: Manages user transactions and related data.
The application's microfrontend approach, combined with state-of-the-art technologies and a focus on modular design, makes it an exemplary project in the realm of modern web development, particularly for complex financial applications.
## Key Features:
1. **Module Federation Implementation**: Utilizes Webpack 5's Module Federation to create a cohesive yet modular application.
2. **Independent Modules**: The application is split into 'Cards' and 'Transactions' modules. Each module operates independently, facilitating separate development, maintenance, and deployment processes.
3. **Redux for State Management**: Each module comes with its own Redux instance, ensuring isolated and effective management of the application state.
4. **Event Bus for Inter-Module Communication**: Implements an event bus for seamless data exchange and interaction between different modules, enhancing overall application performance and user experience.
## integration:
