Skip to content

Latest commit

 

History

History
70 lines (42 loc) · 2.82 KB

README.md

File metadata and controls

70 lines (42 loc) · 2.82 KB

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

8e2sop

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!

7q8apz

(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!

7phhcq

(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