Welcome to the Frontend Masters workshop on JavaScript State Machines and Statecharts with XState, v2! 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 install
oryarn install
- Run
npm run dev
oryarn 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.