Micro Front-End Architecture with React

Course details

In this course, designed uniquely for advanced front-end developers, instructor Ayodele Aransiola shows you how to break complex applications into manageable, standalone micro front-end architectures in React—enabling multiple teams to collaborate seamlessly. Along the way, explore core concepts and integration techniques as well as how to leverage powerful tools like the webpack Module Federation plugin.

Learning objectives
Leverage the core concepts of micro front-end architecture with React.
Understand how multiple teams can collaborate effectively to build and deploy large applications that are split into standalone pieces known as micro front ends.
Implement and manage micro front-end architectures for your organization’s or personal projects.

Concepts

0. Introduction

01 - Breaking monolithic architecture with micro frontends
02 - What you should know
03 - Using GitHub Codespaces

1. Core Concepts of Micro-Frontend Architecture

04 - Overview of micro frontends
05 - Comparing micro frontend with monolithic architecture
06 - Domain-driven architecture
07 - Feature-based architecture
08 - Server Side Includes (SSI) Client-side integration
09 - Communication between micro-frontend layers

2. Architectural Patterns for Micro Frontends

10 - Overview of micro-frontend frameworks
11 - Module federation
12 - Webpack overview
13 - Configuring Webpack for micro-frontend applications
14 - Routing in a micro-frontend application

3. Managing a Micro-Frontend Application

15 - Project setup and team structure
16 - Independent team app setup
17 - Managing shared state and library
18 - Communication among teams
19 - Design system

4. Performance

20 - Lazy loading and caching mechanism
21 - Testing a micro-frontend application

5. Hands-On Project - Bookstore App

22 - Project scope and team setup
23 - Repository and environment setup
24 - Book-listing team development
25 - Cart team development
26 - Checkout team development
27 - Coupling and deploying the complete app
28 - Finalizing the app routing

Conclusion

29 - Next steps