This microfrontend app is built using Webpack Module Federation and serves as a boilerplate for developing a software-as-a-service (SaaS) product or similar applications. It employs a modular and scalable front-end architecture by combining multiple microfrontends, including a shell app, an authentication app, a marketing app, and a dashboard app.
The microfrontend application also utilizes GitHub Actions as a CI/CD (Continuous Integration/Continuous Deployment) tool to automate the build and deployment process. It leverages AWS S3 (Simple Storage Service) to store the static files generated during the build process, and AWS CloudFront as a content delivery network (CDN) to distribute the final application and provide faster content delivery to end-users. checkout the site on AWS CloudFront
The shell app acts as the container for the entire microfrontend architecture. It provides a consistent layout, navigation, and routing functionality across the different microfrontends. The shell app is responsible for loading and rendering the other microfrontends dynamically using Webpack Module Federation.
The authentication app handles user authentication and authorization within the microfrontend architecture. It provides login and registration functionalities, manages user sessions, and controls access to protected resources across the different microfrontends. The authentication app is built using React, React Router, and material-ui.
The marketing app is responsible for showcasing the marketing content and features of the SaaS product. It provides a public-facing interface that highlights the product's value proposition, features, pricing, and other marketing materials. The marketing app is built using React, React Router, and material-ui.
The dashboard app serves as the main user interface for managing and interacting with the SaaS product's functionality. It provides access to various features, data visualizations, and administrative tools. The dashboard app is built using Vue.js, Vue Router, Chart.js, and other necessary libraries.
React is a JavaScript library for building user interfaces. It is used in the authentication app, marketing app, and shell app to create reusable UI components, manage application state, and handle dynamic rendering of modules.
Vue.js is a progressive JavaScript framework for building user interfaces. It is used in the dashboard app to create a responsive and interactive user interface, manage application state, and handle data visualization.
React Router is a routing library for React applications. It is used in the authentication app, marketing app, and shell app to handle client-side routing and navigation between different pages within the microfrontend architecture.
Material-UI is a popular UI component library for React applications. It provides pre-built, customizable UI components that adhere to the Material Design principles. Material-UI is utilized in the authentication app, marketing app, and shell app to achieve a consistent and visually appealing user interface.
Sass is a CSS extension language that enables the use of variables, nesting, and other advanced features. It is used to write modular and maintainable stylesheets for the microfrontend apps, ensuring consistent styling across the application.
Chart.js is a JavaScript library for creating interactive and customizable charts. It is used in the dashboard app to visualize data and provide insights to the users of the SaaS product.
Webpack Module Federation is a feature of Webpack that allows sharing of JavaScript modules across different applications. It enables the dynamic loading and rendering of microfrontends within the shell app. Webpack Module Federation facilitates the composition of the different microfrontend apps into a cohesive and integrated user experience.
Contributions to this microfrontend app boilerplate are welcome! If you encounter any issues, have suggestions for improvements, or would like to add new features, please open an issue or submit a pull request.
This project is licensed under the MIT License. Please see the LICENSE file for more details.