xstate-examples
Explanation
This repo serves as a resource for any developer curious about state machines and statecharts. I've heard developers that _want_ to use state machines, but have not found the "perfect reason" to utilize them. Now the "perfect reason" is easier to find. 😉Repository Structure
- Each example is in it's own directory.
- Each example is a small application created with Create React App/vue-cli/Svelte Template, Xstate, tailwind, React Testing Library/Vue Testing Library/Svelte Testing Library, and cypress.
- Each example has a README with link to the xstate visualization tool for that example's state machine/statechart.
- Each example uses model-based testing and state machine/statechart best practices.
Current Examples
Future Examples
- React Native "Simon Says" game
- Authentication flow
- Welcome/walkthrough flow
- Todos
- Ticket selection and payment flow
- Stepped form/wizard
- Medium-like article creation/updating
Examples Showing Specific State Machine Concepts
- Guards: Trivia Game React | Vue | Svelte
- Transient Transitions: Trivia Game React | Vue | Svelte
- Invoking Services (Promises): Trivia Game React | Vue | Svelte