Bazinga! Making state machine flows with two keywords

The dependable state is like a best friend. Everyone needs one.

This is my brain reacting to the concept of state machines three years ago.

Things have changed since then.

Today, I make state machines in React apps for a living as a designer.

FYI:
No, I don’t have an engineering degree.
I didn’t go through a boot camp or finished an online crash course.
I haven’t been watching youtube tutorials for hours.
I still have no clue how it fully works under the hood.
This post will not be about any of the above either!

In this post, I will show you how to prototype state machines for React applications without JavaScript, XState, Python, Java, C++, Unison. Well, there are many ways to make state machines, but I will show you how I do it.

I like this new way of creating state machines not because it’s cool or geeky.

I like it because it’s simple and flexible.

It’s important to mention that at the end of the day we ship React apps to the clients and the state machine remains as a dev dependency.

First things first. What’s the state?

Let’s get on the same page. The state is what you see as a user at some point in the application — which is interface plus data.

You can think of a single state as one artboard in Sketch or one step in the flow if you are a designer.

The flow will typically have many steps, artboards, or views.

Sentimental retrospection from my design times:
I used to think about the steps in the flow as artboards — you know, those little white frames carefully positioned in the Illustrator or Sketch…