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

Introduction

Breaking monolithic architecture with micro frontends
What you should know
Using GitHub Codespaces

Core Concepts of Micro-Frontend Architecture

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

Architectural Patterns for Micro Frontends

Overview of micro-frontend frameworks
Module federation
Webpack overview
Configuring Webpack for micro-frontend applications
Routing in a micro-frontend application

Managing a Micro-Frontend Application

Project setup and team structure
Independent team app setup
Managing shared state and library
Communication among teams
Design system

Performance

Lazy loading and caching mechanism
Testing a micro-frontend application

Hands-On Project - Bookstore App

Project scope and team setup
Repository and environment setup
Book-listing team development
Cart team development
Checkout team development
Coupling and deploying the complete app
Finalizing the app routing

Conclusion

Next steps