https://github.com/nartc/nx-state-machine-todos-mvc

TodosMVC with State Machine (XState) and Nx (nx.dev)
https://github.com/nartc/nx-state-machine-todos-mvc

angular nx react state-machine typescript xstate

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/nartc/nx-state-machine-todos-mvc
• Owner: nartc
• Created: 2020-03-09T21:36:26.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-10T01:28:44.000Z (almost 5 years ago)
• Last Synced: 2024-10-04T13:32:26.293Z (2 months ago)
• Topics: angular, nx, react, state-machine, typescript, xstate
• Language: TypeScript
• Size: 231 KB
• Stars: 18
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome_xstate - Github - XState with React and Angular in Nx Workspace

README

        
# TodosMVC with XState and NX

![https://i.imgur.com/BLQFJ5u.gif](https://i.imgur.com/BLQFJ5u.gif)

This repository implements **TodoMVC** project ([TodoMVC](http://todomvc.com/)) utilizing **[XState](https://xstate.js.org/)** by [David K.](https://twitter.com/DavidKPiano) and **[NX](https://nx.dev)**

## 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](./libs/data)

- [Machine](./libs/machine)

- [Angular Common](./libs/ng-common)

- [Angular Todos](./libs/ng-todos)

- [React Common](./libs/react-common)

- [React Todos](./libs/react-todos)

## Thank you for checking out the repo