https://github.com/sandromaglione/getting-started-xstate-and-effect

Learn how to use all the features of XState in combination with the power of Effect・Newsletter sandromaglione.com
https://github.com/sandromaglione/getting-started-xstate-and-effect

effect effect-schema functional-programming xstate xstate-fsm xstate-react

Last synced: about 3 hours ago
JSON representation

Learn how to use all the features of XState in combination with the power of Effect・Newsletter sandromaglione.com

• Host: GitHub
• URL: https://github.com/sandromaglione/getting-started-xstate-and-effect
• Owner: SandroMaglione
• Created: 2023-12-15T05:50:31.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-05-15T10:12:36.000Z (6 months ago)
• Last Synced: 2024-05-16T19:52:34.668Z (6 months ago)
• Topics: effect, effect-schema, functional-programming, xstate, xstate-fsm, xstate-react
• Language: TypeScript
• Homepage: https://www.sandromaglione.com/newsletter
• Size: 85 KB
• Stars: 42
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `XState & Effect`



  

    

  

  

    

  



***

This project is part of my weekly newsletter at [**sandromaglione.com**](https://www.sandromaglione.com/newsletter?ref=Github&utm_medium=newsletter_project&utm_term=xstate&utm_term=effect).



     



## Project structure

The project contains 2 folders:

- [`first-example`](./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`](./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** (``)

  - [`machine.ts`](./audio-player-react/src/machine.ts): XState machine

  - [`effect.ts`](/audio-player-react/src/effect.ts): actions of the machine implemented using Effect

  - [`App.tsx`](/audio-player-react/src/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** 👇