Welcome to the React Finland workshop on State Machines and Statecharts with XState & React! In this workshop, we will be learning about software modeling with state machines and statecharts by building a real-world media player application.
- GitHub repo: https://github.com/statelyai/xstate
- Documentation: https://xstate.js.org/docs
- Visualizer: https://stately.ai/viz
- Community: https://discord.gg/xstate
- Run
npm installoryarn - Run
npm run devoryarn dev - Navigate to any of the exercises:
- 00-modeling
- 01-states-transitions
- 02-actions
- 03-context
- 04-guards
- 05-compound-states
- 06-parallel-states
- 07-final-states
- 08-history-states
- 09-actors
- 10-testing
In this workshop, we will be building a media player. This app will allow you to like/ unlike a song, represented by the heart symbol. The next option the app will allow you to do is thumbs down the song, which will remove it from your playlist. The play/pause action will allow you to play or pause the current song. Then we have the forward/next option of the app that will allow you to skip the current song and load the next in queue. Next, you will have the option to mute/ unmute the current song that is playing.
We will be using state machines, state charts, and the actor model to build these features on our media player app.