State Machines & XState Workshop

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

Getting Started

1. Run npm install or yarn install
2. Run npm run dev or yarn dev

3. Navigate to any of the exercises:

4. 00-modeling

5. 01-states-transitions
6. 02-actions
7. 03-context
8. 04-guards
9. 05-compound-states
10. 06-parallel-states
11. 07-final-states
12. 08-history-states
13. 09-actors
14. 10-testing

What we're building

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.