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

• Trivia Game React | Vue | Svelte

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

Handy Resources

• Xstate documentation
• Statecharts community
• World of Statecharts