💡 Key highlights of the idea:

• The application is divided into multiple services (micro-apps), with each service/module responsible for a specific feature or version, enabling flexible upgrades and changes.
• Static files (e.g., SVGs, images, audio in the public directory) can be shared and reused across different services/modules.
• Services can share storage and cookies managed by the main service, ensuring synchronized login states and user data.
• Each service/module has its own codebase, making it easy to maintain, upgrade, or replace without affecting other parts of the system.
• Flexible deployment model: services/modules can be deployed independently or bundled together within the main app depending on requirements.
• Optimized build performance: building individual services/modules is significantly faster than building the entire system at once. When integrated into the main source, overall build time is still reduced considerably.
• Parallel development support: different developers or teams can work on separate services/modules without code conflicts, improving efficiency compared to a monolithic codebase.
• Technology flexibility per service: for example, some services/modules can use CSR (Client-Side Rendering) while others leverage SSR (Server-Side Rendering).
• Cross-technology flexibility: services can be built with React, Next.js, Vue, or Angular, depending on the specific use case and team expertise.
• Scalability: new services/modules can easily be added, removed, or updated without disrupting the entire system.
• Reusability: a service/module can be reused across multiple applications.

🚀 The current demo video applies this architecture with 8 services/modules (6 built with Next.js, 1 with React, and 1 with Vue). I built and deployed all services/modules together with a NestJS server, and everything is running seamlessly in a production environment.

👉 Demo video: Demo MicroFrontend

👉 Example of a service that can run completely independently in the demo: [Service Portfolio](https://l.facebook.com/l.php?u=https%3A%2F%2Fprofile-hoang.vercel.app%2F%3Ffbclid%3DIwZXh0bgNhZW0CMTAAYnJpZBExa0J6OG9jZ0ZXOUtUNFFHRgEeStBDCdA5oi_hTE6_z5ihDjkydVx5xS46iRoyXzkuiEQlNXnFE-AsKwufWFY_aem_Bbb8FbFl-0rx8BYce1IJVA&h=AT0RZOiPKXeZxmE9sFn83BdH_EJF_HVBriSqNs_dO-RjiKucdB9u1xtuJyep5qS7qIon64xXGvoB0bCpl4Ke8nz-h3I192luQTiDBkc24IeN8kh6K5kNDgFRHpaVjUG6HWExLYXxXz2CCjJJeGL3PQ&__tn__=R]-R&c[0]=AT2OoHSKyIL2oSlZO88VFtpKNF3mtCvuqCdb8-z_Fxl4Fr6_mPzopbaU46-gsoQuJvTTrdQf60wzpqD4jiw5wjR4Y4P9pHJ4Mjfl6cXIFIZM-gPwio-B5UEo33eoH1qPTQV-yp7ROuRx_iYixUqox_GQgFkpocdO3fwjSVq61YmZ)

👉 Additional update: Added Angualar App service

Screen Recording 2025-09-05 at 22.07.58.mov

• The main service/module is the Login page, enabling smooth navigation across different services/modules.
• The system consists of 8 services/modules: 6 built with Next.js, 1 with React, and 1 with Vue, all integrated within the same architecture.