XState & Effect

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

Project structure

The project contains 3 workspace apps: - 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 an 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 - actor-emit-events: Vite app example for emitting events from actors.

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