XState & Effect

This project is part of my weekly newsletter at sandromaglione.com.

Project structure

The project contains 2 folders:

• first-example: My initial exploration with all the features of XState and state machines. I was specifically interested in working with types to try making the machine as type-safe as possible
• audio-player-react: This is the implementation of the weekly project. It contains a Vite app that uses XState and Effect to implement and audio player (<audio>)
  • machine.ts: XState machine
  • effect.ts: actions of the machine implemented using Effect
  • App.tsx: react component that uses the state machine to render the audio player and send events

Read all the details of the audio player implementation and how to use XState and Effect in the full article 👇