Stop wasting time fixing unpredictable 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.

Buy the course   →

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.

Screenshot of the Photobook app

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
Jon Bellah

Meet Jon Bellah

Jon Bellah is a full-stack developer, writer, and speaker from the beautiful city of Denver, Colorado. 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. Jon is currently a front-end engineer at TED.

Course Modules

  1. Introduction

    • Getting setup

      Getting setup

    • Setting up Firebase

      Setting up Firebase

    • xstate & react-automata

      xstate & react-automata

  2. Core Concepts

    • State machines & statecharts

      State machines & statecharts

    • Hierarchical machines

      Hierarchical machines

    • Parallel machines

      Parallel machines

    • Transitions


    • Actions & guards

      Actions & guards

    • History states

      History states

  3. Design to Statecharts

    • Collaborating with designers

      Collaborating with designers

    • Breaking down designs

      Breaking down designs

  4. Authentication

    • Global authentication states

      Global authentication states

    • User registration

      User registration

    • User login

      User login

  5. Data Fetching

    • Fetching data

      Fetching data

    • Pagination


  6. Writing Data

    • Writing data

      Writing data

  7. Animations

    • Animation with statecharts

      Animation with statecharts

  8. Testing

    • Testing statecharts

      Testing statecharts

Course Package

  • All 19 HD videos
  • All source code
  • Unlimited updates, forever

Frequently Asked Questions

  • When was this course recorded?

    The latest version of this course was recorded in July and August of 2018.

  • How long will I get 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 and I will 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

© 2018 Jon Bellah. All rights reserved.