XState Meme
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.
THAT Conference (Texas) 2024 - Componentizing Application State
All resources can be found here
Special thanks to the THAT Conference team for the opportunity to speak!
KCDC 2023 Talk - Componentizing Application State
Special thanks to the KCDC team for the opportunity to speak!
(This meme was generated live and on stage at KCDC!)
Nick Taylor Stream
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!
ImgFlip & Open AI APIs
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>"
Getting started
Start the dev server on port 3000
.
npm start
Start Storybook on port 6006
.
npm run storybook
Links
- Check out XState
- Storybook
- storybook-xstate-addon