8bu / nx-state-machine-todos-mvc

TodosMVC with State Machine (XState) and Nx (nx.dev)

TodosMVC with XState and NX

This repository implements TodoMVC project (TodoMVC) utilizing XState by David K. and NX

Run

1. Clone this repository
2. Run npm install
3. Run Angular app: npx ng serve todos
4. Run React app: npx ng serve todos-react (you'd need different ports if you run both at the same time)
5. Check localhost:{port} (default to 4200)

Information

xstate provides a nice APIs to implement State Machine in the application. Two Machines todosMachine and todoMachine are re-used for both Angular and React applications. The project uses TodoMVC template and the library todomvc-app-css for the CSS.

Angular

On the Angular side, this project utilized Observable View Model pattern to transform the State Machine context to data to be used on the template with the async pipe. The Machines are set up in TodosMachineService and TodoMachineService.

React

On the React side, this project uses React Hooks and @xstate/react to wire up the Machines to React components.

Other README

• Data
• Machine
• Angular Common
• Angular Todos
• React Common
• React Todos

Thank you for checking out the repo