This project started its life as an example for Nick Taylor's Twitch stream and was adapted to be the primary example for my talk, Componentizing Application State at KCDC. The latest iteration of this talk covers XState 5 and was presented at THAT Conference (Texas) 2024.
All resources can be found here
Special thanks to the THAT Conference team for the opportunity to speak!
Special thanks to the KCDC team for the opportunity to speak!
(This meme was generated live and on stage at KCDC!)
Special thanks to Nick Taylor for having me on his stream to chat about this!
(This meme was generated live and on stream!)
This is a simple, XState + React example. It uses the ImgFlip API to generate random memes without the user knowing what meme template will be associated with their captions!
To use the ImgFlip API, you'll need an account. Specifically, you'll need to send the username and password in every request to generate a meme. To add this, add them to a .env.development file in the project.
Additionally, you'll want an Open AI API Key added to the file as VITE_OPENAI_API_KEY.
Note: This is a paid service which requires a credit card, but it is very low cost.
The .env.development file should look like the following:
VITE_MEME_USERNAME="<USERNAME>"
VITE_MEME_PASSWORD="<PASSWORD>"
VITE_OPENAI_API_KEY="<API_KEY>"
Start the dev server on port 3000.
npm startStart Storybook on port 6006.
npm run storybook- Check out XState
- Storybook
- storybook-xstate-addon