TodoMVC Live Demo
See the TodoMVC Demo in action at feature-hub.io/todomvc.
The TodoMVC demo is a partial implementation of the TodoMVC project. Although micro frontends wouldn't and shouldn't really be used for such a small web application, this still demonstrates how a web application can be composed of multiple Feature Apps that share state through Feature Services.
In this case the app is sliced into three Feature Apps that are deployed independently, and a single Feature Service:
- The "header" Feature App is a DOM Feature App with an external CSS file. It provides the functionality for creating a new todo.
- The "main" Feature App is a React Feature App with CSS Modules. It displays the todos, and provides the functionality for deleting todos and marking them as complete.
- The "footer" Feature App is a React Feature App with Styled Components. It displays how many uncompleted todos are left, and provides the functionality for removing all completed todos from the list.
- The "todo manager" Feature Service stores the todos, and provides methods to the three consuming Feature Apps for reading and modifying the todos.