Stop wasting timefixing brittle applications

Finite state machines and statecharts help developers build more predictable interfaces by providing sequential, easily-modeled logic. In this course, you'll learn how to make use of state machines in your JavaScript applications.

What You'll Build

You will take an application called Photobook from comp to working application. The app has many of the features that you would expect to find in apps today: authentication, data fetching, CRUD actions, automated tests, and more.

Using xstate and react-automata, you will cover all of the important features of statecharts: parallel states, hierarchical states, history states, and guards.

Photobook application

What You'll Learn

In this course, you'll learn how to use state machines and statecharts to better design the state of your applications. Though we make heavy use of React and react-automata, the principles and ideas of this course translate across languages and frameworks.

At the end of this course, you will be able to answer all of the following questions:

  • What are state machines and statecharts?
  • How can I leverage statecharts to build complex, modern web applications?
  • What do statecharts give me that other state management tools do not?
  • How can I approach refactoring my applications to use statecharts?
  • How do I test statecharts?

Who is this for?

The goal of this course is to take intermediate to advanced JavaScript developers, particularly those interested in React, and give you the knowledge and tools to start using state machines and statecharts to build more predictable applications.

I believe this course will be particularly useful to developers who are:

  • Frustrated by the difficulty of maintaining complex state in your applications
  • Front-end JavaScript developers looking to level-up
  • Backend developers interested in front-end state management
  • JavaScript developers looking to advance their careers

About Jon

Jon Bellah is a full-stack developer, writer, and speaker from the beautiful city of Nashville, TN. He has been building things on the web for more than two decades, and has worked with some of the biggest brands in the world.

Course Modules

Each video breaks down a different topic, covering everything you need to know to begin using state machines in your applications.


  • Getting setup

  • Setting up Firebase

  • Xstate & react-automata

Core Concepts

  • State machines & statecharts

  • Herarchical machines

  • Parallel machines

  • Transitions

  • Actions & guards

  • History states

Design to Statecharts

  • Collaborating with designers

  • Breaking down designs


  • Global authentication states

  • User registration

  • User login

Data Fetching

  • Fetching data

  • Pagination

Writing Data

  • Writing data


  • Animation with statecharts


  • Testing statecharts

Start BuildingBetter Applications

Are you ready to boost your JavaScript skills?

  • All 19 HD videos

  • All related source code

  • Unlimited updates, forever

Frequently Asked Questions

Answers to all those burning questions you probably don't have... but just in case.

When was this course recorded?
The latest version of this course was recorded in July and August of 2018.
How long will I have access?
There is no time limit and no recurring fee.
Do you offer any student discounts?
Yes! If you're a student, whether at a university, high school, bootcamp, or otherwise, please send me an email with proof that you're a student and I will send you a discount code.
What if I don't like this course?
Nothing is more important to me than you getting value out of this course. If you're unhappy with the product, please email me within 14 days of your purchase and I will issue you a full refund you.
Will this course be updated?
Yes! I've already begun planning several new modules. If you purchase this course now, you will receive all the new modules for the base package of the course for free when they are released. Please note, too, that the price of this course will increase as new modules are added.
You didn't answer my question!
If you have a question that isn't covered in this FAQ, shoot me an email at